ReactJS - charger les données avant de rendre le composant

Question

Dans le ReactJS, je change la route à un nouveau avec un "id", puis basé sur cet "id", je dois appeler une API et récupérer des données.

J'ai utilisé l'appel API dans componentDidMount et componentWillMount et j'ai essayé setState() pour avoir mes données dans l'état. mais ils n'ont pas fonctionné dans mon cas.

Le problème est dans la partie render() lorsque je veux utiliser mes données (à partir de l'état), les données ne sont pas là parce que l'appel API prend un certain temps pour mettre à jour l'état.

Voici mon code:

componentDidMount() { 
    api.get(id).then((response) => { 
    this.setState({response,}); 
    }); 

Avec cette approche, je n'ai pas les données quand je le veux (render), il finira par être dans l'état mais trop tard! Comment puis-je modifier mon approche pour résoudre le problème de chargement?

Answer 1

La façon dont vous le faites, vous pouvez valider l'objet d'état de réponse dans votre méthode de rendu, et si elle est null/vide, puis retourner <div>Loading...</div>.

Lorsque votre état est ensuite mis à jour en fonction de la réponse, le composant se rendra automagiquement. Cette fois, l'objet sera rempli et vous pouvez retourner votre code HTML de composant.

par exemple.

render(){ 

    if (!this.state.response){ 
     return <div>Loading...</div> 
    } 

    return (
     <div>Proper Stuff</div> 
    ); 
} 

Modifier Sur une note du site, si vous définissez l'état initial dans le constructeur, vous pouvez vous assurer que l'objet ne soit pas vide, mais juste a des valeurs nulles/vides. Cela pourrait également aider selon ce que votre méthode render fait, par exemple.

constructor(props){ 
    super(props); 

    this.state = { 
     response: {...} 
    }; 
} 

Answer 2

Votre code devrait être rendu

render(){ 
return({this.state.response? 
      <div> Render your component here</div>: 
      <div> Loading ... </div>}); 
} 

De cette façon, votre composant ne rendrait pas jusqu'à ce qu'il ait les données et montrer Loading ... texte à la place.