0

I'm trying to make a React Native recipe app in which you can save your recipes locally, but I get the following error when I added AsyncStorage: Screenshot

Here is my code:

App.js: https://gist.github.com/anonymous/4e83b8c5ec797278c8a642dfca60c622

Recipes.js: https://gist.github.com/anonymous/c894357b3413f37dbf856c98ef6b93f4

Improve this question

1 Answer 1

Reset to default
1

the AsyncStorage.getItem is async, so your this.state.recipes is null. You should change your componentWillMount() to

async componentWillMount(){
  let recipes = await AsyncStorage.getItem('recipes);
  if (recipes) {
     this.setState({ recipes });
  }
});

And you should make sure your this.state.recipes is an array. Hope it helps!

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

2 Comments

Or, if you want promises instead of async/await, then: AsyncStorage.getItem('recipes').then(recipes => this.setState({ recipes })).catch(e => console.error('That did not work: ', e))
I have done what you have said and it seems to work, but how can I test my app in Expo to see if the data will still be there? Also, this app was build using create-react-native-app.