AsyncStorage not finding variable

Question

I'm sure its a stupid mistake somewhere but when I switch between class component to functional (to learn/understand how state works in both of these) I kind of miss the logic sometimes (with this.props etc). (home.js navigates to the page called addDiary.js) I'm not finished with the async logic/code but don't understand why I get the error "cant find variable: diary" at this point, thank you

Home.js

const Home = ({navigation}) => {
    const [refreshing, setRefreshing] = useState(false);
        const [diary, setDiary] = useState(null)

whenRefresh = async () => {
try{
  setRefreshing(true);
  const diary =  await AsyncStorage.getItem('diary')
  setDiary(JSON.parse('diary'))
  setRefreshing(false)}
  catch (error) {console.log(error)}
} 

    
    return(
          <View style={styles.home}>

                <ScrollView 
                    refreshControl={
                    <RefreshControl 
                    refreshing={refreshing}
                    onRefresh={whenRefresh}/>}
                    style={styles.body}>

                    {diary ? <ListItem
                    title={diary.title}
                    subtitle="test"
                    onPress={()=>{console.log("listitem pressed")}}
                    /> : null}

addDiary.js

const AddDiary = () => {


   const [title, setTitle] = useState()
    const [body, setBody] = useState()
    
const submit = async () => {
    const diary = {title, body}
    await AsyncStorage.setItem('diary', JSON.stringify(diary))
    navigation.goBack()
}


        return(
<SafeAreaView style={styles.home}>
    <View style={styles.group}>
                <Text style={styles.label}>Title:</Text>
                <TextInput
                placeholder="title"
                style={styles.titleInput}
                onChangeText={setTitle}
                value={title}
                />
    </View>

    <View style={[styles.group, {flex:1}]}>
                <Text style={styles.label}>Body:</Text>
                <TextInput
                placeholder="title"
                style={[styles.titleInput, {height: 300}]}
                onChangeText={setBody}
                value={body}
                />
    </View>

                <Button
                name="check-circle" 
                size={50} 
                color="black" 
                onPress={submit}
                />


</SafeAreaView>
        )
}

Without looking too much at the rest of your code, AsyncStorage only stores strings, not objects. If you need to store objects, JSON.stringify it when setting it, then parse it when you get it. Example: AsyncStorage.setItem('diary', JSON.stringify(diary)) — Aleksandar Zoric
– Aleksandar Zoric, Commented Jan 6, 2022 at 9:22
Ah thank you, I added that but it still returns the same error, everything works fine when I console.log up until I send the diary to "home" :( — Ollie
– Ollie, Commented Jan 6, 2022 at 9:32
By the same logic of @AleksandarZoric, you need to JSON.parse the object coming from the AsyncStorage — Onlinogame
– Onlinogame, Commented Jan 6, 2022 at 9:51
Thank you, I updated all the code in the example above with stringify and parse, but it's still not working :/ — Ollie
– Ollie, Commented Jan 6, 2022 at 10:03

Akrem · Accepted Answer · 2022-01-06 12:13:08Z

1

const submit = async () => {
    const diary = {title, body}
    await AsyncStorage.setItem('diary',JSON.stringify(diary))
    
}

Change your submit function to this. and it should work fine

const Home = ({navigation}) => {
const [refreshing, setRefreshing] = useState(false);
const [diary, setDiary] = useState(null)
whenRefresh = async () => {
  setRefreshing(true);
  const diary =  await AsyncStorage.getItem('diary')
  setDiary(JSON.parse('diary'))
  setRefreshing(false)

}

return(
      <View style={styles.home}>

            <ScrollView 
                refreshControl={
                <RefreshControl 
                refreshing={refreshing}
                onRefresh={whenRefresh}/>}
                style={styles.body}>

                {diary ? <ListItem
                title={diary.title}
                subtitle="test"
                onPress={()=>{console.log("listitem pressed")}}
                /> : null}

answered Jan 6, 2022 at 12:13

Akrem

713 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ollie Over a year ago

Ahh thank you!! It cleared up the diary but now I get the error JSON Parse error: Unexpected identifier "diary" - any ideas? :/ (I updated the code above with all the changes)

Ollie Over a year ago

Everything solved now, thank you so much! The last problem was that I used 'diary' instead of just diary after the parse hehe

Akrem Over a year ago

Happy to help you

Collectives™ on Stack Overflow

AsyncStorage not finding variable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related