[英]Fetch local JSON file from public folder ReactJS
两天以来我有一个问题; 我想从使用 react-app 创建的 React 应用程序的公共文件夹中读取本地 JSON。
这是我的项目结构:
上市
数据
源代码
组件
为什么我把我的文件放在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 文件,我将不胜感激。
我认为您的 fetch 论点是错误的。 应该是
fetch('data/mato.json')
只要数据文件放在公共文件夹中,它就可以在 Chrome 中工作,就像在我的项目中一样。 所以, fetch('data/mato.json') 就足够了。
您还需要传入一些指示Content-Type
和Accept
作为application/json
headers
,以告诉您的客户端您正在尝试访问并接受来自服务器的某些 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);
分享和评论我你的想法,谢谢!
提供您在公共文件夹中的 JSON 文件名并存储数据链接
componentDidMount() {
fetch("./url.json")
.then((res) => res.json())
.then((data) => {
this.setState({ links: data });
console.log(this.state);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.