javascript - 如何在 React 中将数据存储在 JSON 文件中？

Question

在我使用 react 和 react-router 制作的购物应用程序的 src 文件夹中，我有一个 JSON 文件，其中包含有关某些产品的基本信息。

在应用程序组件中，我导入数据并分配给本地状态，并通过道具将其传递给我的子组件以供它们使用。

export default function App() {
  const [products, setProducts] = useState(require("./products.json"));
  ...
}

虽然所有这些都有效，但我想在页面重新加载时触发一个事件，并将修改后的数据从状态写入 JSON 文件，这样数据就不会丢失。

window.onbeforeunload = () => {
  console.log("Page Reloaded");

  fs.writeFile("products.json", JSON.stringify(products), (ex) => {
    if (ex) throw ex.message;

    console.log("State copying successful.");
  });
};

在页面实际重新加载之前，我可以看到Page Reloaded正在记录的片刻，但我希望保存的数据保持不变。

我怀疑 fs 模块没有正确导入，因为我已经记录了它并得到了一个空对象。我尝试过手动导入它以及使用 require 函数调用它。

import fs from "fs";

任何帮助将非常感激。

标签： javascriptjsonreactjs