Définir les données JSON récupérées en tant qu'état et l'utiliser

Question

Je suis un débutant à Réagir donc j'essaie d'apprendre les concepts de base.

Je reçois des données via une API, je Hardcoded des données dans un but d'apprentissage, avec une demande d'extraction comme ceci:

componentDidMount() { 
    fetch("myserver.com/api/a/1") 
    .then(function(response) { 
     response.json() 
    }) 
} 

et dans mon constructeur, je mis en l'état des données: « false »:

constructor(props) { 
    super(props) 

    this.state = {data: 'false'}; 
} 

Mais à partir de maintenant je suis perdu. J'ai trois chaînes différentes dans l'objet JSON que j'utilise dans mon API, mais je ne sais pas comment y accéder. J'ai essayé de définir setState dans componentDidMount mais je reçois beaucoup d'erreur.

Comment faites-vous dans des situations comme celles-ci? Où dois-je définir l'état, et comment accédez-vous/itérez-vous généralement sur les objets JSON?

Merci d'avance!

Answer 1

Essayez quelque chose comme ceci:

 export default class YourComponent extends React.Component { 

     constructor(props) { 
      super(props) 

      this.state = {data: 'false'}; 
     } 

     componentDidMount() { 
       this._getData(); 
     } 


     _getData =() => { 
       fetch("myserver.com/api/a/1") 
       .then(response => { 
        if (response.ok) { 
        return response; 
       } else { 
       let errorMessage = 
        `${response.status(${response.statusText})`, 
        error = new Error(errorMessage); 
        throw(error); 
       } 
       }) 
       .then(response => response.json()) 
       .then(json =>{ 
        console.log(json); 
        this.setState({ data: json.data }) 
       }); 
      } 

      render() { 
       return (
       <div> 
        { 
        this.state.data && 
        this.state.data.map((item, key) => 
         <div key={key}> 
         {item} 
         </div> 
        )} 
       </div> 
     )} 
    }