反应setState设置为字符串，而不是对象

Question

我想获取一个大的JSON文件，当网页已被加载，然后更新与该数据的反应状态。

目前，我有此代码

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对象。

react setstate problem

我怎么能初始化与获取JSON状态。

Answer 1

首先，我会建议使用fetch库而不是Promises和XMLHttpRequest。如果您需要支持IE 11的下方，你可以使用一个polyfill

与您的代码坚持，虽然，在任何时候，你才会在你的response使用JSON.parse，把你回来的JSON字符串转换为JavaScript对象。

this.setState({"sections" : JSON.parse(response)}); 

这将是更容易和更清洁与fetch虽然我觉得，

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); 
    }); 
}