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

IT技术 javascript json reactjs local fetch-api
2021-04-16 14:09:39

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

这是我的项目结构：

  • 上市

    • 数据

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

  • 源文件

    • 组件

      • 应用程序.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 文件，我将不胜感激。

4个回答

我认为你的 fetch 论点是错误的。它应该是

fetch('data/mato.json')

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

谢谢@Lex Soft。已经给你们所有人打分了……昆汀和凯文。提供的信息很有帮助:)
2021-05-31 14:09:39

您还需要传入一些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()
  },[])

为什么使用 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);

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

这个答案是完全一样的这个答案。如果你觉得这个问题是重复的，给它一个标记，不要只是在网络上复制和粘贴相同的答案。
2021-05-28 14:09:39
@Tyler2P 谢谢，我只是给了一个标志。两个问题都有一个含义，只是关键字不同：stackoverflow.com/a/67848787/5008599
2021-06-03 14:09:39
其它你可能感兴趣的问题
上一篇找不到module：无法在 Next.js 应用程序中解析“fs” 下一篇graphQL 查询中的变量