时间戳

首页 > 解决方案 > 如何在本地存储中存储和读取json文件的文件内容

react-native - 如何在本地存储中存储和读取json文件的文件内容

问题描述

我有一个 json 文件：data.json

[
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "userId": 1,
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    },
    {
      "userId": 1,
      "id": 4,
      "title": "eum et est occaecati",
      "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
    }
]

我想将文件内容保存在本地存储中，然后从本地存储中读取文件内容。所以尝试了以下方法：

import AsyncStorage from '@react-native-async-storage/async-storage';
import * as data from "../data.json";    // MY JSON FILE

const setLocalItem = async (data) => {
    try {
        const jsonValue = JSON.stringify(data)
        await AsyncStorage.setItem('@storage_Key', jsonValue);
    } catch (error) { }
};

const getLocalItem = async () => {
    try {
        const jsonValue = await AsyncStorage.getItem('@storage_Key')
        console.log(jsonValue);
        return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (e) {
        // error reading value
        console.log(e);
    }
}

<>
    <TouchableOpacity onPress={setLocalItem}>
        <Text>Save file</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={getLocalItem}>
        <Text>Get file</Text>
    </TouchableOpacity>
</>

当我单击时Get file，我进入null我的控制台。我不知道我哪里错了。请帮忙

标签： react-nativereact-native-androidreact-native-iosasyncstorage

解决方案

您setLocalItem接受一个data参数，但您在没有参数的情况下调用它。解决它的一种方法是：

<TouchableOpacity onPress={() => setLocalItem(data)}>
  <Text>Save file</Text>
</TouchableOpacity>

第二个选项，因为您已data在文件顶部定义，所以不要在函数中隐藏名称setLocalItem并采用 0 参数：

const setLocalItem = async () => {
    try {
        const jsonValue = JSON.stringify(data)
        await AsyncStorage.setItem('@storage_Key', jsonValue);
    } catch (error) { }
};

然后保留您的原件：

<TouchableOpacity onPress={setLocalItem}>
  <Text>Save file</Text>
</TouchableOpacity>

推荐阅读