在React-native中擴展並顯示異步存儲中的數組

Question

我正在嘗試將用戶輸入添加到AsyncStorage內的特定數組中。 我不確定我當前的代碼是否正在執行此操作。 我無法通過“ alert（）”顯示它，當前我收到此錯誤： 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

您的代碼存在一些問題，首先，如果您希望像這樣對它進行范圍划分，我將在組件狀態中存儲availableActivities 。 其次，當您調用async函數時，您應該使用await來實現承諾，第三個也是最重要的AsyncStorage.getItem(this.availableActivities)看起來像是一個錯字，但是AsyncStorage鍵值對必須是字符串。

這是您的代碼的更新，我認為它將提供您正在尋找的功能：

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))
}

請注意，我更改了函數聲明，這不是必需的，但可以防止將它們綁定到構造函數中。 async / await是.then的替代語法.then它更.then ，更易於閱讀。 要檢查AsyncStorage是否返回值，最好針對null進行測試，最后，我在最后一個函數中修復了錯字。 讓我知道您是否有任何疑問或我錯過了標記

Answer 2

這條線

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

應該

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

Answer 3

我認為問題是您正在使用AsyncStorage，從而以這種方式導致Async。 我認為您的代碼將以這種方式工作：

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!')
  }
} 

您還需要不完全在此功能之后使用它。 在其他地方使用它。

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

建議：您還可以使用Redux維護所有狀態。 您還可以從所需的任何屏幕更新和訪問狀態。 這是一個很好的教程來幫助您啟動它： https : //www.valentinog.com/blog/redux/

Answer 4

看來您正在嘗試以錯誤的方式獲取商品。

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

getItem的第一個參數應為string ：

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

AsyncStorage getItem