在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

您不是保存列表，而是从列表中获取密钥。 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));

Answer 2

.setState()方法为.setState()，因此设置状态后的结果不能立即使用。如果要使用设置状态的结果，则应使用回调（第二个参数），该回调在实际设置状态后调用：

may be asynchronous