如何在 React-Native 中使用 AsyncStorage 存储地图？

Question

import * as React from 'react';

let paths = new Map();
  
export function AddPath(path) {
    if (paths.has(path)){
        return
    }
    else{
        paths.set(path, false);
    }

}

export function CompletedPath(path) {
    paths.set(path, true);
}

以上是我的代码通常的样子。 它按预期运行。 我正在创建一个名为 paths 的 Map 以存储一些重要数据。 它的值要么是真要么是假，而它的键是 JSON 对象。 我需要做的是将此 Map 保存到异步存储中，以便在关闭应用程序后重新打开应用程序时可以检索它。 这是我目前修改代码的尝试：

import * as React from 'react';
import AsyncStorage from '@react-native-community/async-storage';

let paths = new Map();

const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('Map')
      let paths = JSON.parse(jsonValue);
    } catch(e) {
      // error reading value  
    }
    alert(paths)
}

const storeData = async (data) => {
    try {
      const jsonValue = JSON.stringify(data)
      await AsyncStorage.setItem('Map', jsonValue)
    } catch (e) {
      // saving error
    }
}

getData();
  
export function AddPath(path) {
    if (paths.has(path)){
        return
    }
    else{
        paths.set(path, false);
        storeData(paths);
    }

}

export function CompletedPath(path) {
    paths.set(path, true);
    storeData(paths);
}

我像往常一样创建路径映射，然后调用 getData() 以查看映射是否已存在于异步存储中。 然后，无论我之前在哪里更新地图，我都会更新异步存储。

但是，我无法让它工作。 当我重新打开应用程序时，“路径”地图始终显示为空。

因为它是一个 Map 而不是一个 JSON 对象，所以我如何存储到 asyncstorage 的路径可能是一个问题吗？

有任何想法吗？

Answer 1

如果你JSON.stringify的Map ，它会转变为{}。

将MAP转换为Array并使用stringify 。

 const map = new Map(); map.set('test',true); console.log(JSON.stringify(map)); console.log(JSON.stringify(Array.from(map.entries())));

字符串化

const jsonValue = JSON.stringify(Array.from(data.entries()));

解析

let paths = new Map(JSON.parse(jsonValue));