从公共文件夹 ReactJS 获取本地 JSON 文件

Question

两天以来我有一个问题；我想从使用 react-app 创建的 React 应用程序的公共文件夹中读取本地 JSON。

这是我的项目结构：

• 公开

  • 数据

    • mato.json（我的 .JSON 文件）

• src

  • 组件

    • App.js

为什么我把我的文件放在public 文件夹中？如果我使用src 文件夹中的文件构建我的项目，我的文件将通过命令yarn build 包含在生成的main.js 中。

我想修改我的 json 文件而不总是重建我的应用程序。

所以我不能使用如下代码：

import Data from './mato.json'

…或：

export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';

我试图获取我的 .json 文件，但“文件方案”与 fetch() 和 chrome 不是朋友。

（Chrome 错误：“index.js:6 Fetch API 无法加载 file:///D:/projects/data/mato.json。不支持 URL 方案“file”。”）

这是我的获取代码：

fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})

它仅适用于 Firefox。我也试过mode: 'cors' 也不好。

当然，我没有任何服务器——这是一个本地项目——所以如果有人知道我如何在本地读取我的 JSON 文件，我将不胜感激。

Answer 1

我认为您的 fetch 参数是错误的。应该是

fetch('data/mato.json')

Answer 2

只要将数据文件放在公共文件夹中，它就应该在 Chrome 中也可以在我的项目中使用。 所以，fetch('data/mato.json') 就足够了。

Answer 3

您还需要传入一些headers，将Content-Type 和Accept 表示为application/json，以告诉您的客户端您正在尝试访问并接受来自服务器的一些JSON 资源。

  const getData=()=>{
    fetch('data/mato.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])

Answer 4

为什么要使用 fetch？我觉得速度很慢... 我认为这个解决方案会更好...... 您可以将此行添加到您的 index.html 中：

<script type="text/javascript" src="settings.js"></script>

然后在 settings.js 中你可以这样做：

 window.globalTS= {
  "site_url": "hi.com",
  "home_url": "hello.com"
};

现在在您的组件中，您可以访问如下变量：

console.log(window.globalTS.site_url);

分享并评论我你的想法，谢谢！