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

问题描述

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);
}

以上是我的代码正常显示的样子。它按预期运行。我正在创建一个称为路径的地图,以便存储一些重要数据。它的值为true或false,而其键为JSON对象。 我需要做的是将此地图保存到异步存储中,以便在关闭应用程序后重新打开该应用程序时可以对其进行检索。 这是我目前尝试修改代码的尝试:

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);
}

我照常创建路径Map,然后调用getData()以查看该映射是否已存在于异步存储中。然后,无论我之前要更​​新地图的什么地方,我都会更新异步存储。

但是,我无法正常运行。重新打开应用程序时,“路径”地图始终显示为空。

由于它是Map而不是JSON对象,我如何存储到异步存储的路径会不会有问题?

有什么想法吗?

解决方法

如果您在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())));

Stringify

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

解析

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