Réagir setState à la chaîne à la place de l'objet

Question

J'essaie d'aller chercher un gros fichier json lorsque la page Web a été chargée, puis mettre à jour l'état de réaction avec ces données.

Actuellement, j'ai ce 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); 
    }); 
} 

Le code définit les sections à une piqûre comme le montre la capture d'écran au lieu de l'objet JSON réelle.

react setstate problem

Comment puis-je initialiser l'état avec le JSON tiré par les cheveux.

Answer 1

Tout d'abord, je recommanderais d'utiliser la bibliothèque fetch au lieu de Promises et XMLHttpRequest. Si vous avez besoin pour soutenir IE 11 et ci-dessous, vous pouvez utiliser un polyfill

Sticking avec votre code cependant, à aucun moment vous semblez utiliser JSON.parse sur votre response, pour transformer la chaîne JSON vous rentrerez dans un objet JavaScript .

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

Ce serait beaucoup plus facile et plus propre avec fetch si je me sens,

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