如何从 React.js 读取和写入本地 JSON 文件？

Posted 2023-02-22

【中文标题】如何从 React.js 读取和写入本地 JSON 文件？

【英文标题】：How to read and write to local JSON files from React.js?

【发布时间】：2021-04-30 09:07:45

【问题描述】：

我已经为此查看了多个资源，但是似乎没有一个能够回答我的问题。我的 React 应用程序中有一个名为 items.json 的本地 JSON 文件。在该文件中，是我希望能够更新的对象列表。我尝试过使用fs，但这显然在 React 中不起作用，因为我收到了这个错误：

Unhandled Rejection (TypeError): fs.readFileSync is not a function

我想要做的是，当代码获得一个新项目时，它会查看 JSON 文件以查看其name 属性中是否存在具有匹配值的现有对象。如果有，它会将对象count 属性加1，否则它会创建一个新对象，并将其附加到JSON 文件中的列表中。这是我为此编写的代码。逻辑似乎是合理的（虽然它没有经过测试），但我不知道如何读取/写入数据。

let raw = fs.readFileSync("../database/items.json");
let itemList = JSON.parse(raw);
let found = false;
for (let item of itemList.averages) 
    if (item.name === this.state.data.item_name) 
        found = true;
        item.count += 1;
    

if (!found) 
    let newItem = 
        name: this.state.data.item_name,
        count: 1,
    
    itemList.averages.push(newItem);

let newRaw = JSON.stringify(itemList);
fs.writeFileSync("../database/items.json", newRaw);

JSON 文件：

    "averages": [
        
            "name": "Example",
            "count": 1,
        
    ]

【问题讨论】：

您在浏览器中。您不能在文件系统上写入文件，但可以提示用户下载它们。 Related

为什么不直接导入json文件？

@Gh05d 我最初是这样做的，但据我所知（不远），imorted 文件是只读的。我可能错了

好的，另一个问题。为什么要将其保存在 JSON 文件中？为什么不使用 localStorage 或 sessionStorage 之类的东西？

我只是假设 JSON 会是最简单的，因为我知道它是如何工作的，但是如果 localStorage 和 sessionStorage 是一个更好的选择，我愿意学习它是如何工作的

【参考方案1】：

首先，浏览器本身无法访问文件系统，因此您将无法使用您的 react 应用程序来实现这一点。但是，如果您在后端使用 Node.js（或任何其他 FW）并创建一个 API 端点来帮助您写入文件系统，则可以实现这一点。

其次，如果您只想在前端做一些事情而不创建额外的 API 来将数据保存在 JSON 文件中，我认为这在您的情况下是不必要的。您可以使用 localstorage 保存数据并要求用户使用以下方式下载文本文件：

TextFile = () => 
    const element = document.createElement("a");
    const textFile = new Blob([[JSON.stringify('pass data from localStorage')], type: 'text/plain'); //pass data from localStorage API to blob
    element.href = URL.createObjectURL(textFile);
    element.download = "userFile.txt";
    document.body.appendChild(element); 
    element.click();
  

现在，要使用本地存储 API，您可以在这里查看 - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

如果答案有效，您可以接受并投票。谢谢！

工作得很好，谢谢！

【参考方案2】：

从 json 导入和读取可以是这样的：

import data from ‘./data/data.json’;

然后使用.map() 来迭代数据。

对于本地编写，您可以使用一些库，例如 https://www.npmjs.com/package/write-json-file

【参考方案3】：

使用 NodeJs 读取和写入 JSON 文件到本地存储非常简单，这意味着快速的一小块后端 API 将有助于完成这项工作。

几段代码可能对您有所帮助。假设您的 JSON 结构如下所示；

    "name":"arif",
    "surname":"shariati"

读取 JSON 文件；

// import * as fs from 'fs';
const fs = require('fs')
fs.readFile('./myFile.json', 'utf8', (err, jsonString) => 
    if (err) 
        return;
    
    try 
        const customer = JSON.parse(jsonString);
 catch(err) 
        console.log('Error parsing JSON string:', err);
    
)

customer 包含你的 JSON，值可以通过 customer.name 访问；

写入 JSON 文件

假设您的 JSON 对象有更新，如下所示；

const updatedJSON = 
    "name":"arif updated",
    "surname":"shariati updated"

现在您可以写入文件了。如果文件不存在，它将创建一个。如果已经存在，则会覆盖。

fs.writeFile('./myFile.json', JSON.stringify(updatedJSON), (err) => 
    if (err) console.log('Error writing file:', err);
)