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

时间:2021-04-09 23:27:28

标签: react-native react-native-android react-native-ios asyncstorage

我有一个 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。我不知道我哪里出错了。请帮忙

1 个答案:

答案 0 :(得分:0)

您的 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>
相关问题