如何从浏览器读取本地 JSON 文件？

Question

我知道之前已经讨论过这个问题，但是我找到的所有解决方案都是几年前的，并且不起作用。

我需要做的是从位于我的 React 应用程序的公共目录中的 JSON 文件加载一些配置字段。 只是一个静态资产，在构建过程之外

当我尝试使用 AJAX 获取它时，出现“意外令牌':'”错误。 我的 config.json 文件看起来很简单：

{
    "name": "yoyo"
}

它位于 create-react-app 程序的公共目录中。 有什么办法可以做到吗？

编辑：一切正常，我只是犯了一些愚蠢的错误

Answer 1

你为什么不直接导入它而不是做请求？ 如果您出于任何原因这样做，您是否尝试过类似JSON.parse ？

Answer 2

当我注意到您想从项目的公共目录加载 JSON 文件时，我更新了我的问题。

为此，请使用fetch并加载public文件夹中存在的文件，然后将其设置为在您的主要组件中使用（例如： App.js ）。

这是一个使用 React Hooks 的例子：

import React from "react";
import "./styles.css";

export default function App() {
  const [characters, setCharacter] = React.useState(null);

  React.useEffect(() => {
    fetch("names.json")
      .then(results => results.json())
      .then(character => setCharacter(character));
  });
  return (
    <div className="App">
      <h1>Star Wars names!</h1>
      <ul>
        {characters.map(character => (
          <li key={character.name}>{character.name}</li>
        ))}
      </ul>
    </div>
  );
}

在这里使用新的useEffect钩子的工作示例

在这里使用旧的componentDidMount工作示例