时间戳

首页 > 解决方案 > 在 asyncStorage 中存储数组状态对象

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

标签： javascriptarraysreactjsreact-nativeasyncstorage

解决方案

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

推荐阅读