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

Posted 2023-02-22

【中文标题】从公共文件夹 ReactJS 获取本地 JSON 文件

【英文标题】：Fetch local JSON file from public folder ReactJS

【发布时间】：2018-03-29 07:58:09

【问题描述】：

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

【参考方案1】：

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

fetch('data/mato.json')

【参考方案2】：

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

【讨论】：

谢谢@Lex Soft。已经评价了你们所有人......昆汀和凯文。提供的信息很有帮助:)

【参考方案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()
  ,[])

【参考方案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);

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

【讨论】：

这个答案和this answer一模一样。如果您觉得这个问题是重复的，请给它一个标记，不要只是在整个网络上复制粘贴相同的答案。

@Tyler2P 谢谢，我刚刚给了一个标志。这两个问题都有一个含义，只是关键字不同：***.com/a/67848787/5008599