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

Question

为此，我查看了多种资源，但是，似乎没有一个能够回答我的问题。我的 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,
        }
    ]
}

原文由 SirArchibald 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

原文由 Apoorva Chikara 发布，翻译遵循 CC BY-SA 4.0 许可协议