React Native - 如何使用 AsyncStorage 保存地图答案

【问题标题】：React Native - How to save map using AsyncStorageReact Native - 如何使用 AsyncStorage 保存地图
【发布时间】：2018-02-01 05:27:51
【问题描述】：

我尝试在我的 React Native 应用程序中使用 AsyncStorage 将用户输入保存为 JS 映射。

保存时没有显示错误，但是当我尝试取回数据时得到“[object Map]”。

我的用户地图有简化版。实际的 User 对象具有比这更多的属性，但 ID 始终与映射键相同。

const dataKey = 'user-data';
let data = new Map();
data.set(1, { name: 'John', id: 1, title: 'Mr.' })
data.set(2, { name: 'Johanna', id: 2, title: 'Miss.' })

有保存数据的代码。

async saveDate = (dataKey, data) => {
  try {
    await AsyncStorage.setItem(dataKey, data.toString());
  } catch (err) {
    console.log(err);
  }
}

此地图将有 200 多个用户。

知道如何在 react native 中保存复杂的数据结构吗？

【问题讨论】：

标签： javascript reactjs dictionary react-native react-native-android

【解决方案1】：

您需要将其保存为 JSON，而不是将您的数据转换为字符串。改变

await AsyncStorage.setItem(dataKey, data.toString());

到

await AsyncStorage.setItem(dataKey, JSON.stringify(data));

更多详情请看官方文档链接：https://facebook.github.io/react-native/docs/asyncstorage.html#mergeitem

【讨论】：

【解决方案2】：

与其他答案状态之一一样，您需要将数据保存为 JSON。

但是，您将无法简单地将 data 转换为 JSON。相反，您需要传播 Map 的数组条目并将其传递给 JSON.stringify()。

所以改变

await AsyncStorage.setItem(dataKey, data.toString());

到

await AsyncStorage.setItem(dataKey, JSON.stringify([...data]));

然后，当您想从 Async 获取项目时，您需要将其转换回 Map，即

const jsonData = AsyncStorage.getItem(dataKey)

const mapData = new Map(jsonData)

【讨论】：

【解决方案3】：

提供的答案将无法正常工作。在没有先解析的情况下读回 json 后，您无法创建新的 Map。这有效：

  saveData = async () => {
    const dataKey = 'user-data';
    let data = new Map();
    data.set(1, { name: 'John', id: 1, title: 'Mr.' })
    data.set(2, { name: 'Johanna', id: 2, title: 'Miss.' })

    try {
      await AsyncStorage.setItem(dataKey, JSON.stringify([...data]));
    } catch (err) {
      console.log(err);
    }

    const jsonData = await AsyncStorage.getItem(dataKey)
    const parseData = JSON.parse(jsonData)
    const mapData = new Map(parseData)

    console.log(mapData);
    //get a list of IDs
    console.log(Array.from(mapData.keys()));



}

对于 200 个值，这是一个很大的开销。我会考虑使用 sprintf/sscanf 库并只存储一个字符串，例如每行一行数据。这仅在表中的每一行都具有相同数量的元素并且您不更改布局时才有效。当然，您可以将字符串转换回对象，以便重新创建 Map。只是一个想法！

【讨论】：