Question

我有两天的问题;我希望在使用react-app创建的React应用程序中从我的公共文件夹中读取本地JSON。

这是我的项目结构：

公开
- 数据
  - mato.json（我的.JSON文件）
的src
- 成分</ P>
  - App.js

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

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

所以我不能使用像：

这样的代码

import Data from './mato.json'

......或：

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

我试图获取我的.json文件，但“文件方案”不是fetch()＆amp;的朋友。铬..

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

这是我的fetch代码：

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

您还需要传入一些 headers 表示 Content-Type 和 Accept 作为 application/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 3

只要数据文件放置在公用文件夹中，它就应该在Chrome中像在我的项目中一样工作。因此，fetch（'data / mato.json'）就足够了。

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);

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

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

4 个答案: