小编Kev*_*evz的帖子

两天以来我有一个问题。我想从我的用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文件，我将不胜感激。