将数组状态对象存储在asyncStorage中

时间:2019-11-30 09:21:33

标签: javascript arrays reactjs react-native asyncstorage

我想使用异步存储来存储阵列状态。但每次我重新加载该应用程序时,它都会空白。下面是一个示例代码,为了更加清晰,我仅显示了这些功能。

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

2 个答案:

答案 0 :(得分:3)

您不是在保存列表,而是从列表中获取密钥。 =SUM((ProductDim[List_Price]-SalesFacts[Discount]) * SalesFacts[QuantitySold]) 您将数组索引保存为状态。

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

答案 1 :(得分:0)

.setState()方法是may be asynchronous,因此设置状态后的结果不能立即使用。如果要使用设置状态的结果,则应使用回调(第二个参数),该回调在实际设置状态后调用:

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