Question

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

目前，在保存数据时，我发现我的对象数组只包含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

        }
   });
}

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

1 个答案: