Pourquoi ma mise à jour « setState » ne se reflète-t-elle pas immédiatement dans mon composant React ?

setState dans React : navigation dans les mises à jour asynchrones

Contexte :

Dans React, setState( ) est utilisé pour mettre à jour l'état du composant. Cependant, il est important de noter que setState() n'est pas toujours immédiat. Il peut être exécuté de manière asynchrone, entraînant des écarts potentiels dans les valeurs d'état.

Le problème spécifique :

Un utilisateur confronté à un problème signale des incohérences dans les mises à jour d'état à l'aide de setState(). dans une méthode composante. Plus précisément, ils ont observé que les instructions console.log accédant à l'état après setState() ne reflétaient pas toujours la valeur mise à jour prévue.

Extrait de code :

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); // outputs correct total

setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); // outputs incorrect total

Cause :

Le problème survient en raison de la nature asynchrone de setState(). Lorsque le premier console.log est exécuté, l'état n'a pas encore été mis à jour. Par conséquent, il enregistre la valeur incorrecte.

Solution :

Pour résoudre ce problème, il est recommandé d'utiliser la fonction de rappel fournie par setState() pour accéder à l'état mis à jour après la mise à jour est terminée.

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

Dans cet extrait de code révisé, le deuxième console.log est imbriqué dans la fonction de rappel. Cela garantit qu'il n'est exécuté qu'après la mise à jour de l'état, fournissant la valeur correcte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!