反応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(); 
}); 

}スクリーンショットの代わりに実際のJSONオブジェクトに示すよう

componentDidMount(){ 
    this.get('https://x.com/data/tool.json').then((response) =>{ 
    this.setState({"sections" : response}); 
    console.log(this.state); 
    }).catch((err) =>{ 
    console.log(err); 
    }); 
} 

コードはスティングのセクションを設定しています。

react setstate problem

はどのようにしてフェッチされたJSONで状態を初期化することができます。

Answer 1

まず、PromisesとXMLHttpRequestの代わりにfetchライブラリを使用することをお勧めします。あなたは以下のIE 11をサポートする必要があるとした場合、あなたががあなたのコードにこだわっpolyfill

を使用することができ、どの時点で、あなたが戻ってJavaScriptオブジェクトに取得するJSON文字列をオンにする、あなたのresponseにJSON.parseを使用するように見えるん。

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