【问题标题】:React Native AsyncStorage [closed]React Native AsyncStorage [关闭]
【发布时间】:2023-03-03 00:38:01
【问题描述】:

我想使用 AsyncStorage 将房屋保存在数组中。每个数组元素代表一个房屋对象。并且每个房屋对象都有一个纬度、经度和一个门牌号。我不知道如何去表达这一点。在我看来,AsyncStorage 不适合保存可以以编程方式更新的动态对象。 我希望能够添加更多房屋并删除一些房屋。基本上我想做的是给一些房子添加书签,并在用户点击时将它们从书签中删除。 有人可以帮忙吗?

【问题讨论】:

  • 我赞成你的问题归零 :) 这是一堵文字墙,但考虑到 RN 文档中如何记录 AsyncStorage,我认为这是一个聪明的问题。您必须存储字符串,但您实际上可以将它们字符串化并合并更新的字段,请参阅AsyncStorage.mergeItem()。你的问题的答案也很好。

标签: arrays react-native asyncstorage


【解决方案1】:

AsyncStorage 非常适合这个。

从您的房屋的结构开始,我将创建一个数组来存储代表单个房屋的对象。

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

保存到 AsyncStorage

当你想将你的收藏写到AsyncStorage,你可以这样做:

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

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

如果您的项目设置为支持async/await,您也可以使用它。

从 AsyncStorage 读取

AsyncStorage 读取您的收藏只需通过以下方式完成:

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

您可以根据自己的状态设置响应,随心所欲。

删除特定房屋

这完全取决于您如何设置应用。你是不是要去map通过每个房子,例如创建一个列表组件?

(抱歉丢了右边的边框)

如果是这样,你可以:

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 函数来处理它。

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,然后保存新房屋。

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

【讨论】:

    【解决方案2】:

    您需要像 Realm 这样的 Sqlite 替代品,它免费、快速且易于编码,这样您将节省大量工作时间,还可以根据需要进行查询、更新和删除对象。

    【讨论】:

      猜你喜欢
      • 2019-11-03
      • 1970-01-01
      • 2019-01-30
      • 2019-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多