如何通过反应读取本地服务器 JSON 文件？

Question

我需要使用我的 react 应用程序读取位于我机器上的 JSON 文件，但似乎没有任何效果。

我尝试导入 fs（使用 import 和 require），但它返回一个空白对象，我无法使用它的任何功能。

Jquery 似乎也找不到我的文件。

我搜索的每个地方都使用 FS、Jquery 或 FileReader（最后一个总是用于客户端上传到页面的文件）。

这是我尝试使用 FS 的解决方案之一：

const fs = require("fs");

export default function getJson() {
  let rawdata = fs.readFile("file.json");
  let json = JSON.parse(rawdata);
  console.log(json);
}

当我重新加载浏览器时

TypeError: fs.readFile is not a function

使用 Jquery 我试过这个：

import $ from "jquery";

export default function getJson() {
  $.getJSON("file.json", function() {
    console.log("success");
  });
}

控制台显示：

 Failed to load resource: the server responded with a status of 404 (Not Found)

我希望你能帮助我。 提前致谢！

Answer 1

fs 是将 Node 的引擎连接到底层操作系统的自省。它在浏览器代码中不存在（例如 ReactJS）。

为了安全措施，浏览器拒绝 JS 与底层平台交互。所以要读取文件，你有两个选择（据我所知）：

在 html 中创建一个文件输入字段（就像您通常看到的文件上传字段一样）。或者您需要由某个服务器提供文件。你可以把文件放在你的assets文件夹里，然后在react中请求。

更新 1： 根据我的经验，包含“运行时配置”的更简单方法之一是将配置作为资产提供服务。 我在 ReactJS 方面没有太多经验，但想法是一样的。 假设您将config.json 放入Public/json/config.json。然后您可以通过请求从应用程序中读取此文件。

这是一个例子：

fetch("/json/config.json").then(resp=>resp.json()).then(console.log);

这是一个小的工作stackblitz example