在 asyncStorage 中存储数组状态对象

Question

我想使用异步存储来存储数组状态。但每次我重新加载应用程序时，它都会出现空白。下面是一个示例代码，为了更清楚起见，我只展示了函数。

    componentDidMount() {
      this.getDataSync();
    }


  getDataSync = async () => {
    try {
      const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

      const parsedList = JSON.parse(list);
      const obj = Object.keys(parsedList);

      this.setState({ isDataReady: true, list: obj || [] });
    } catch (e) {
      Alert.alert('Failed to load list.');
    }
  }

  handleAdd() {
    const { firstname, lastname, email, phone} = this.state;
    const ID = uuid();
    const newItemObject = {
        key: ID,
        firstname: firstname,
        lastname: lastname,
        email: email,
        phone: phone,
        image: null,
    };

    this.setState(prevState => ({
      list: [...prevState.list, newItemObject]
    }));

    this.saveItems(this.state.list);

  }

  saveItems = list => {
    AsyncStorage.setItem(LIST_STORAGE_KEY, JSON.stringify(list));
  };

Answer 1

.setState() method is may be asynchronous，所以设置状态的结果，设置后不能立即使用。如果你想使用设置状态的结果，你应该使用回调（第二个参数），它在状态实际设置后调用：

this.setState(
  prevState => ({
    list: [...prevState.list, newItemObject]
  }),
  () => this.saveItems(this.state.list)
);

Answer 2

您不是在保存列表，而是从列表中获取密钥。 const obj = Object.keys(parsedList); 您正在将数组索引保存到状态。

getDataSync = async () => {
  try {
    const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

    const parsedList = JSON.parse(list);

  this.setState({ 
     isDataReady: true, 
     list: Array.isArray(parsedList) && parsedList.length && parsedList || [] 
  });

 } catch (e) {
    Alert.alert('Failed to load list.');
  }
}

同时传递 saveItems 作为回调以保存正确的数据。

this.setState(prevState => ({
  list: [...prevState.list, newItemObject]
}), () => this.saveItems(this.state.list));

在 asyncStorage 中存储数组状态对象

storing array state objects in asyncStorage

javascript

arrays

reactjs

react-native

asyncstorage