J'ai mon Clockblock Code> Composant où je soulevé l'état est maintenu dans l'objet "TIMER": shouldComponentUpdate(nextProps, nextState){
console.log( this.state.timer );
console.log( nextState.timer );
console.log( this.props.timer );
console.log( nextProps.timer );
return true;
}
3 Réponses :
Le point est que updateTimer incendies avant ne doit pas être exécuté exécute. C'est ça. Ainsi, lorsque vous mettez à jour votre état soulevé dans le composant parent des composants des enfants (VIA passé dans la fonction d'accessoires), gardez à l'esprit que devrait être modifié sera déjà modifié l'état et les accessoires.
J'ai résolu une situation similaire en comparant cela.state à NextProps et à la mise à jour de l'état. Je ne pense pas que ce soit une excellente solution, mais que ce n'est pas venu avec quoi que ce soit d'autre Jet.
state = {
dayOff: this.props.myProperty
}
shouldComponentUpdate(nextProps, nextState) {
const shouldUpdate = this.state.myProperty !== nextProps.myProperty;
if (shouldUpdate) this.state.myProperty = nextProps.myProperty
return shouldUpdate;
}
Vous pouvez définir fonctionnellement l'état. Parce que à la place, vous pouvez mettre à jour l'état par adopter une fonction de mise à jour. Ceci lots toutes les mises à jour de l'État. Lors de la réaction du cycle de vie commence à mettre à jour l'état, cela traitera toutes les fonctions de mise à jour en attente en attente dans la séquence. Ceci est de la DOCS décrivant ce qui se passe lorsque le State utilise un objet. Les appels suivants remplaceront les valeurs des appels précédents dans le même
cycle, la quantité ne sera incrémentée qu'une seule fois. Si le prochain
L'état dépend de l'état actuel, nous vous recommandons d'utiliser le programme de mise à jour.
Forme de fonction, à la place:
https: // réactjs .org / docs / réact-composant.html # SetState setstate est async, lorsque plusieurs éléments appellent setState réact utilise les propriétés les plus récentes transmises à setstate .
faire
console.log (minuterie.duration) pour vous assurer qu'il est à jour. Je crois que c'est une chose connue queconsole.log fournit une valeur en directpour tout sauf les types primitifs. En d'autres termes, vous pouvez voir une autre valeur qui était au moment de l'exécution.Je viens d'essayer ceci: console.log (cela.props.time); débogueur; console.log (this.state.ticer); Et rien n'a changé ... nouvelle valeur dans cet ensemble.Props.Timer même quand il est arrêté par le débogueur.
Ils ne devraient pas - nextate.timer.duration vs. code> this.state.ticer.duration sont ceux qui doivent différer (dans
horlogeBlock au moins - Dans les enfants, ce seraitnextprots.timer.duration etceci.props.timer.duration ). Mais je viens de remarquer aussi que vous utilisez la minuterie d'un magasin de Redux à l'origine - pourquoi utilisez-vousSetState () pour manipuler le composant plutôt que le fournisseurDeryck et SkyBeer - Merci, j'ai trouvé le problème. Pas de blâme pour réagir ou Redux, comme je pensais érlier. Le point est que UpdateTimer incendie avant que les fins soient exécutées. C'est ça. Ainsi, lorsque vous mettez à jour votre état soulevé dans la composante parent des composants des enfants, gardez à l'esprit que cela devrait être contourné pour obtenir déjà l'état et les accessoires. Je ne savais pas ça :-)