反应本机AsyncStorage [英] React Native AsyncStorage

问题描述

我想使用AsyncStorage将房屋保存在阵列中.每个数组元素代表一个房屋对象.每个房屋对象都有一个纬度，经度和一个房屋编号.我不确定如何去代表这一点.在我看来，AsyncStorage不适合保存可以通过编程方式更新的动态对象. 我希望能够添加更多房屋并删除一些房屋.基本上，我想做的是为一些房屋添加书签，并在用户单击时将其从书签中删除. 有人可以帮忙吗?

I want to save houses in an array using AsyncStorage. Each array element represents a house Object. And each house object has a latitude, longitude and a house number. I am not sure how to go about representing this. It seems to me that AsyncStorage is not well-suited for saving dynamic objects that can be updated programmatically. I want to be able to add more houses and delete some houses. Basically what I am trying to do is bookmark some houses and delete them from the bookmarks when the user clicks. Can anyone help ?

推荐答案

AsyncStorage绝对是完美的选择.

AsyncStorage is absolutely perfect for this.

从房屋的结构开始，我将创建一个数组，其中存储代表单个房屋的对象.

Starting with the structure of your houses, I would create an Array which stores objects representing an individual house.

const houses = [
  {
    number: 1,
    latitude: 51.5033,
    longitude: -0.119519
  }
]

保存到AsyncStorage

当您要将收藏集写入AsyncStorage时，您将像这样进行操作:

When you want to write your collection to AsyncStorage, you would do so like this:

AsyncStorage
  .setItem('@houses', JSON.stringify(houses))
  .then(houses => console.log(houses)

静态setItem(键:字符串，值:字符串，回调?:?(错误:?错误)=>无效)

static setItem(key: string, value: string, callback?: ?(error: ?Error) => void)

如果您的项目已设置为支持async/await，则也可以使用async/await.

You can also use async/await if your project is set up to support it.

从AsyncStorage读取

只需通过以下方式即可从AsyncStorage读回您的收藏集:

Reading your collection back from AsyncStorage is simply done via:

AsyncStorage
  .getItem('@houses')
  .then(houses => console.log(JSON.parse(houses)))

您可以将响应设置为您的状态，并根据需要进行操作.

You could set the response in your state, do as you please.

删除特定房屋

这完全取决于您设置应用程序的方式.您要在每个房屋中浏览map并创建一个列表组件吗?

This depends entirely on how you set your app up. Are you going to map through each house and create a list component for example?

(抱歉失去右边的边框)

(Sorry about losing the border on the right)

如果是这样，您可以:

houses.map(house => (
  <View>
   <Text>Number: {house.number}</Text>
   <Text>Latitude: {house.latitude}</Text>
   <Text>Longitude: {house.longitude</Text>
   <Button onPress={() => this.deleteHouse(house.number)}/>
  </View>
));

然后创建一个deleteHouse函数来处理它.

Then create a deleteHouse function which will handle it.

const deleteHouse = (number) => {
  const { houses } = this.state; // Assuming you set state as previously mentioned
  const newHouses = houses.filter((house) => house.number != number);
  this.setState({houses: newHouses}, () => saveHouses);
}

最后是一个saveHouses，以将其同步回AsyncStorage.该功能将清除AsyncStorage，然后保存新房子.

And finally a saveHouses to sync it back to AsyncStorage. The function will clear AsyncStorage and then save the new houses.

const saveHouses = () => {
  const { houses } = state;
  AsyncStorage
    .removeItem('@houses')
    .then(() => {
      AsyncStorage
        .setItem('@houses', JSON.stringify(houses))
        .then(houses => console.log(houses)
    });
}

这篇关于反应本机AsyncStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！