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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

我认为您的提取参数有误。它应该是

fetch('data/mato.json')

以上是 从公用文件夹ReactJS中获取本地JSON文件 的全部内容， 来源链接： utcz.com/qa/433840.html

回到顶部