react setState 设置为字符串而不是对象 [英] react setState sets to string instead of object
问题描述
我试图在网页加载后获取一个大的 json 文件,然后使用该数据更新反应状态.
I am trying to fetch a big json file when the webpage has been loaded and then update react state with that data.
目前,我有这个代码
get(url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open('GET', url);
req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
req.onerror = (e) => reject(Error(`Network Error: ${e}`));
req.send();
});
}
componentDidMount(){
this.get('https://x.com/data/tool.json').then((response) =>{
this.setState({"sections" : response});
console.log(this.state);
}).catch((err) =>{
console.log(err);
});
}
代码将部分设置为一个字符串,如屏幕截图所示,而不是实际的 json 对象.
The code sets sections to a sting as shown in the screenshot instead of the actual json object.
如何使用获取的 json 初始化状态.
How can I initialize state with the fetched json.
推荐答案
首先我会推荐使用 fetch 库而不是 Promises 和 XMLHttpRequest.如果您需要支持 IE 11 及以下,您可以使用 polyfill
Firstly I would recommend using the fetch library instead of Promises and XMLHttpRequest. If you need to support IE 11 and below, you can use a polyfill
虽然坚持使用您的代码,但您似乎从未在 response
上使用 JSON.parse
将您获得的 JSON 字符串转换回 JavaScript 对象.
Sticking with your code though, at no point do you appear to use JSON.parse
on your response
, to turn the JSON string you get back into a JavaScript object.
this.setState({"sections" : JSON.parse(response)});
虽然我觉得使用 fetch
会更容易、更干净,
This would be much easier and cleaner with fetch
though I feel,
componentDidMount(){
fetch('https://abx.com/data/tool.json').then(response =>{
if (!response.ok) throw Error('Response not ok')
return response.json(); // This is built in JSON.parse wrapped as a Promise
}).then(json => {
this.setState({"sections" : json});
}).catch(err =>{
console.log(err);
});
}
这篇关于react setState 设置为字符串而不是对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!