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.

反应 setstate 问题

如何使用获取的 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屋！