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

Question

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

这是我的项目结构：

• 上市

  • 数据

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

• src

  • 组件

    • 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()＆chrome 不兼容。

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

这是我的获取代码：

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('data/mato.json')

Answer 2

您还需要传递一些headers指示Content-Type和Acceptasapplication/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 3

只要数据文件放在公共文件夹中，它就可以在 Chrome 中工作，就像在我的项目中一样。所以， fetch('data/mato.json') 就足够了。