异步存储中的对象数组 - React Native

Question

我正在尝试将一组对象保存在异步存储中，这些对象将呈现为列表。用户将能够向数组中添加新项目并更新和删除每个项目。

目前，在保存数据时，我发现我的对象数组只包含 1 个对象，并且每次添加新对象时，都会覆盖以前的对象。

也许这与用于创建每个项目的密钥有关，但我不确定在使用 Async 时如何自动生成唯一密钥？

随后，当将 async 设置为 state 时，我在渲染列表时只有 1 项要循环。

List.js

constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

onLoad = async () => {
  try {
    const data = [];
    const item = await AsyncStorage.getItem('@foods');
    const d = JSON.parse(item);
    const { title } = d;
    data.push({ title });
  this.setState({ data });
console.log(this.state);
  } catch (error) {
    alert('Error', 'There was an error while loading the data');
  }
}

  render() {
    return (
        <View>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => <Text>{item.title}</Text>}
        />
        </View>
       );
     }

AddItem.js 标题（处于状态）由用户输入设置

constructor(props) {
    super(props);
    this.state = {
      title: ''
    };
  }

saveData = () => {
  const { title } = this.state;

  const data = {
    title
  };

  AsyncStorage.setItem('@foods', JSON.stringify(data));
  alert('save success');
}

我的对象数组应该如下所示：

  const list = [
  {
    title,
    description,
    servingSize,
    servingNum
  },
  {
    title,
    description,
    servingSize,
    servingNum
  }
.....etc
]

Answer 1

你尝试的东西完全错了试试这个方法！

从 AsyncStorage 获取多个数据

async loadData() {
   try {
       await Promise.all([AsyncStorage.getItem('data1'), AsyncStorage.getItem('data2')]).then((data) => {
          if ( data[0] != null && data[1] != null ) {
              someVar1 = data[0]; // First data from 1st promise
              someVar2 = data[1]; // Second data from 2nd promise
          }
       });
    } catch (error) {
       console.log(error);
    }
}

编辑：刚刚看到您也想在 AsynStorage 中设置数据

loadData() {
   AsyncStorage.multiSet([['data1', someVar.toString()], ['data2', someVar2.toString()]], (data) => {
       if(data) {
           alert("Something went wrong!");
       } else {
           // do something if the set was successful

        }
   });
}