Question

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

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

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

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个用户。

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

Answer 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

Answer 2

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

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

所以改变

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

到

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

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

const jsonData = AsyncStorage.getItem(dataKey)

const mapData = new Map(jsonData)

Answer 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。只是一个想法！

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

3 个答案: