react setState setzt auf String statt auf Objekt

Question

Ich versuche, eine große JSON-Datei zu holen, wenn die Webseite geladen wurde, und dann den Status mit diesen Daten zu aktualisieren.

Derzeit habe ich diesen Code

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

Der Code legt Abschnitte auf einen Stachel, wie im Screenshot anstelle des aktuellen JSON-Objekt gezeigt.

react setstate problem

Wie kann ich initialisieren Zustand mit dem geholten json.

Answer 1

Erstens würde ich die Verwendung der fetch Bibliothek anstelle von Promises und XMLHttpRequest empfehlen. Wenn Sie 11 IE unterstützen müssen und unten, können Sie ein polyfill

Kleben mit Ihrem Code zu keinem Zeitpunkt aber, verwenden Sie erscheinen Sie JSON.parse auf Ihrem response zu verwenden, die JSON-String Sie zurück in ein JavaScript-Objekt zu erhalten drehen .

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

Dies würde mit fetch viel einfacher und sauberer sein, obwohl ich das Gefühl,

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