Comment puis-je accéder aux valeurs d'état mises à jour immédiatement après avoir appelé setState() dans React ?

L'énigme de la propagation de l'état de React

La méthode setState() de React pose un défi lorsque l'on tente de récupérer les valeurs d'état mises à jour immédiatement après leur mise à jour. Cela est dû à la nature asynchrone de setState().

Considérez le code suivant :

let total = newDealersDeckTotal.reduce((a, b) => 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

Le problème ici est que l'appel setState() est asynchrone. Cela signifie que lorsque la deuxième instruction console.log s'exécute, l'état n'a pas encore été mis à jour.

Pour résoudre ce problème, le modèle de rappel peut être utilisé. Cela implique de transmettre une fonction de rappel à setState() qui sera exécutée une fois le changement d'état terminé :

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

En utilisant cette approche, l'instruction du journal de la console ne s'exécutera qu'une fois l'état mis à jour, garantissant que la valeur correcte est affichée.

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!