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

Question

我为此查看了多种资源，但是似乎没有一个能够回答我的问题。我的 React 应用程序中有一个名为 的本地 JSON 文件items.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,
        }
    ]
}

Answer 1

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