React lifecycle

Question

J'utilise cette méthode pour travailler avec component, componentWillMount pour initialiser les données pour la page d'accueil et componentWillReceiveProps quand le routeur change (page catégorie), mais quand je reviens à la page d'accueil, je sais parce que componentWillMount une fois donc je ne peux pas voir les données.

componentWillMount(){ 
     this.props.fetchBooks(1) 
    } 
componentWillReceiveProps(nextProps){ 
     if(nextProps.match.params.id && nextProps.match.params.id !== this.props.match.params.id){ 
      this.props.fetchBookByCategory(nextProps.match.params.id) 
     } 
    } 

Je mis ce code initialisées à componentWillReceiveProps, il fonctionne, mais il appelle les fetchBooks (1) en permanence même si j'essayé de le faire avec une condition, s'il vous plaît aidez-moi ces problèmes, merci beaucoup.

Answer 1

Vous devez définir nextProps à this.props sur componentWillReceiveProps

componentWillReceiveProps(nextProps){ 
     if(nextProps.match.params.id && nextProps.match.params.id !== this.props.match.params.id){ 
      this.props.fetchBookByCategory(nextProps.match.params.id) 
this.props = nextProps; 
     } 

Answer 2

Ne faites jamais en allant chercher componentWillMount ou constructor. Au lieu de le faire dans componentDidMount.

componentWillMount:

componentWillMount() est appelée immédiatement avant le montage se produit. Il est appelé avant render(), donc l'état de réglage synchrone dans cette méthode ne déclenchera pas un ré-rendu. Évitez d'introduire des effets secondaires ou des abonnements dans cette méthode.

componentDidMount

componentDidMount() est appelée immédiatement après un composant est monté . L'initialisation qui nécessite des nœuds DOM devrait aller ici. Si vous avez besoin de charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la demande réseau. La définition de l'état dans cette méthode déclenchera un ré-rendu .

Vous pouvez conditionnellement rendre votre page si les données n'ont pas encore été reçues.

render(){ 
    return(
    <div> 
     { 
     data.length > 0 ? 
     <List items={data} /> : 
     <div>Loading...</div> 
     } 
    </div> 
); 
}