Avant, j'utilisais componentWillReceiveProps pour mettre à jour mon objet local de composant après avoir obtenu des données de redux.
shouldComponentUpdate(nextProps, nextState){
if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
return true;
}
return false;
}
componentWillUpdate(nextProps, nextState) {
if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
this.setState({user:{
name:nextProps.editUser.name,
email:nextProps.editUser.email,
}}, function(){
this.setState({addModalUserEdit:true});
});
}
}
Mais maintenant je veux utiliser shouldComponentUpdate et componentWillUpdate comme dans la documentation de réaction selon le cycle de vie de réaction.
componentWillReceiveProps(nextProps) {
if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
this.setState({user:{
name:nextProps.editUser.name,
email:nextProps.editUser.email,
}}, function(){
this.setState({addModalUserEdit:true});
});
}
}
mais je génère une erreur comme
"Profondeur de mise à jour maximale dépassée. Cela peut se produire lorsqu'un composant appelle à plusieurs reprises setState dans le composantWillUpdate ou componentDidUpdate. React limite le nombre de mises à jour imbriquées à éviter les boucles infinies. "
Veuillez m'indiquer ce que je fais de mal pour comprendre le cycle de vie des réactions.
Merci d'avance.
3 Réponses :
shouldComponentUpdate est exécuté avant la mise à jour de l'état ( et c'est pourquoi il vous donne le nextState en tant que propriété ). testez par rapport à l ' état dont vous avez besoin pour utiliser nextState.
shouldComponentUpdate(nextProps, nextState){
if (nextProps.editUser && !nextProps.loading && !isEqual(nextState.user, nextProps.editUser)){
return true;
}
return false;
}
Gardez à l'esprit que c'est a conseillé de ne pas effectuer de vérifications d'égalité profonde dans shouldComponentUpdate car cela nuirait aux performances.
De plus, le componentWillUpdate est ( dans les versions récentes ) appelé UNSAFE_componentWillUpdate et il indique
Notez que vous ne pouvez pas appeler
this.setState ()ici; tu ne devrais pas non plus faire toute autre chose (par exemple, envoyer une action Redux) qui déclencherait un mise à jour vers un composant React avant UNSAFE_componentWillUpdate () retourne.
La méthode suggérée est d'utiliser le componentDidUpdate .
J'utilise la version React 16.02 et comment puis-je empêcher la mise à jour de l'état local
qu'est-ce que nextState dans ces fonctions?
@ hu7sy oublie mon dernier commentaire. Il n'est pas autorisé d'utiliser setState dans le componentWillUpdate comme je l'ai mentionné dans ma réponse. Pouvez-vous me dire pourquoi la solution initiale que vous aviez avec componentWillReceiveProps n'est plus suffisante?
je ne dis pas que ce n'est plus suffisant, j'étais curieux d'utiliser le cycle de réaction comme il se doit
et quelle est la meilleure approche pour ne pas restituer les valeurs tout le temps, supposons que j'ai une valeur pour l'objet utilisateur qui sera dans l'état redux et je veux éviter de mettre à jour l'état local tout le temps
shouldComponentUpdate () est appelé avant le rendu lorsque de nouveaux accessoires ou état sont reçus.
shouldComponentUpdate (nextProps) {
return nextProps !== this.props
}
componentDidUpdate () est appelé immédiatement après l'état de mise à jour.
Les deux méthodes ne sont pas appelées pour le rendu initial.
shouldComponentUpdate permet de décider que les changements dans les accessoires ou l'état ont affecté la sortie du composant ou non.
componentDidUpdate sera déclenché lorsqu'il y aura une mise à jour sur la sortie du composant.
shoudComponentUpdate prend 2 arguments, nextProps et nextState . qui contient une nouvelle mise à jour des accessoires et de l'état. et renvoyer un booléen.
quelle est la meilleure approche pour ne pas restituer les valeurs tout le temps, supposons que j'ai une valeur pour l'objet utilisateur qui sera dans l'état redux et je veux éviter de mettre à jour l'état local tout le temps