[英]Fetch local JSON file from public folder ReactJS
I have a problem since two days;两天以来我有一个问题; I want read a local JSON from my public folder on my React application created with react-app.
我想从使用 react-app 创建的 React 应用程序的公共文件夹中读取本地 JSON。
This is my project structure:这是我的项目结构:
public上市
data数据
src源代码
components组件
Why I put my file in public
folder?为什么我把我的文件放在
public
文件夹中? If I build my project with file in src
folder, my file will be include in the generated main.js
by the command yarn build
.如果我使用
src
文件夹中的文件构建我的项目,我的文件将通过命令yarn build
包含在生成的main.js
。
I want modify my json file without always rebuild my app.我想修改我的 json 文件而不总是重建我的应用程序。
So I can't use code like:所以我不能使用如下代码:
import Data from './mato.json'
…or: …或者:
export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';
I tried to fetch my .json file but "file scheme" isn't friend with fetch()
& chrome..我试图获取我的 .json 文件,但“文件方案”不是
fetch()
& chrome 的朋友。
(Chrome error: “index.js:6 Fetch API cannot load file:///D:/projects/data/mato.json. URL scheme "file" is not supported.”) (Chrome 错误:“index.js:6 Fetch API 无法加载 file:///D:/projects/data/mato.json。不支持 URL 方案“file”。”)
This is my code for fetch:这是我的获取代码:
fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})
It's only works with Firefox.它仅适用于 Firefox。 I also tried
mode: 'cors'
does not better.我也尝试过
mode: 'cors'
并不好。
And of course I don't have any server — it's a local project — so if someone knows how I can read my JSON file locally I will much appreciate.当然,我没有任何服务器——这是一个本地项目——所以如果有人知道我如何在本地读取我的 JSON 文件,我将不胜感激。
I think your fetch argument is wrong.我认为您的 fetch 论点是错误的。 It should be
应该是
fetch('data/mato.json')
As long as data files are placed in public folder, it should work in Chrome also as in my project.只要数据文件放在公共文件夹中,它就可以在 Chrome 中工作,就像在我的项目中一样。 So, fetch('data/mato.json') is enough for it.
所以, fetch('data/mato.json') 就足够了。
You also need to pass in some headers
indicating the Content-Type
and Accept
as application/json
to tell your client that you are trying to access and accept some JSON resource from a server.您还需要传入一些指示
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()
},[])
why using fetch?为什么使用 fetch? I think the speed is slow... I think this solution would be better... you can add this line into your index.html:
我认为速度很慢...我认为这个解决方案会更好...您可以将这一行添加到您的 index.html 中:
<script type="text/javascript" src="settings.js"></script>
then in settings.js you can do this:然后在 settings.js 你可以这样做:
window.globalTS= {
"site_url": "hi.com",
"home_url": "hello.com"
};
now in your components you can get to variables like this:现在在你的组件中你可以得到这样的变量:
console.log(window.globalTS.site_url);
share and comment me your idea, thanks!分享和评论我你的想法,谢谢!
give your JSON file name which is present in the public folder and store the data links提供您在公共文件夹中的 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.