在React-native中扩展并显示异步存储中的数组

Question

I'm trying to add user-input to a specific array inside AsyncStorage. I am not sure if my current code is doing this. I can't display it via "alert()" and currently I am receiving this error : the bind value at index 1 is null"

async addAvailableActivity(){
  try {
    AsyncStorage.getItem('availableActivities')
    .then(activities => {this.availableActivities = JSON.parse(activities)})
  } catch (error) {
    alert('Couldnt load activities!')
  }

  let newActivity = this.state.newActivity
  this.availableActivities.push(newActivity)

  try {
    AsyncStorage.setItem('availableActivities', JSON.stringify(this.availableActivities))
  } catch (error) {
    alert('Couldnt add activity!')
  }

}

async displayAvailableActivities(){
  AsyncStorage.getItem(this.availableActivities).then(activities => {alert(activities)})    
}

Answer 1

There are a few problems with your code, first I would store availableActivities in your component state if you want to scope it like that. Second, when you call a function async you should be using await for your promises, third and most important AsyncStorage.getItem(this.availableActivities) this seems like a typo, but AsyncStorage key value pairs must be strings.

Here is an update to your code that I think will provide the functionality you're looking for:

addAvailableActivity = async () => {
  try {
    let activities = await AsyncStorage.getItem('availableActivities')
    let { newActivity } = this.state
    if (activities != null) {
      activities = JSON.parse(activities)
      activities.push(newActivity)
      await AsyncStorage.setItem( 'availableActivities', JSON.stringify(activities) )
    }
  } catch (error) {
    console.warn(error)
  }
}

displayAvailableActivities = () => {
  let activities = await AsyncStorage.getItem('availableActivities')
  console.warn(JSON.parse(activities))
}

note that I changed the function declarations, this isn't necessary but it prevents them from having to be bound in your constructor. async / await is an alternate syntax to .then which is much cleaner and easier to read. To check if AsyncStorage returned a value it's best to test it against null and finally, I fixed the typo in your last function. Let me know if you have any questions or if I missed the mark

Answer 2

This line

AsyncStorage.getItem(this.availableActivities).then(activities => {alert(activities)})

Should be

AsyncStorage.getItem('availableActivities').then(activities => {alert(activities)})

Answer 3

I think the problem is that you are using an AsyncStorage which cause Async in this way. I think in this way your code will work:

async addAvailableActivity(){
  try {
    AsyncStorage.getItem('availableActivities')
    .then(activities => {this.availableActivities = JSON.parse(activities)
    let newActivity = this.state.newActivity
    this.availableActivities.push(newActivity)
   })
  } catch (error) {
    alert('Couldnt load activities!')
  }

  try {
    AsyncStorage.setItem('availableActivities', JSON.stringify(this.availableActivities))
  } catch (error) {
    alert('Couldnt add activity!')
  }
} 

You also need to use it not exactly after this function. Use it some where else.

 async displayAvailableActivities(){
      AsyncStorage.getItem(this.availableActivities).then(activities => {alert(activities)})    
    }

Suggestion: You can also maintain all your states using Redux. You can also update and access your states from any screen that you want. Here is a good tutorial to help you start it: https://www.valentinog.com/blog/redux/

Answer 4

Looks like you are trying to get an item in incorrect way.

async displayAvailableActivities(){
 AsyncStorage.getItem(this.availableActivities).then(activities => {alert(activities)}) 
}

First param for getItem should be string :

async displayAvailableActivities(){
 AsyncStorage.getItem('availableActivities').then(activities => {alert(activities)})    
}

AsyncStorage getItem