Maison > interface Web > js tutoriel > Pourquoi « console.log » n'affiche-t-il pas l'état mis à jour après « setState() » dans React ?

Pourquoi « console.log » n'affiche-t-il pas l'état mis à jour après « setState() » dans React ?

DDD
Libérer: 2024-12-15 10:31:09
original
501 Les gens l'ont consulté

Why Doesn't `console.log` Show the Updated State After `setState()` in React?

Asynchronicité dans la méthode setState() de React

La méthode setState() de React est généralement asynchrone, ce qui implique que lorsque vous console.logez l'état à droite après l'avoir appelé, il se peut qu'il ne soit pas encore mis à jour.

Dans l'extrait de code fourni, vous calculez correctement le total au total et transmettez-le à la méthode setState() pour mettre à jour l'état dealersOverallTotal. Cependant, le code enregistre this.state.dealersOverallTotal immédiatement après, ce qui peut révéler une valeur incorrecte car l'état n'a pas eu suffisamment de temps pour se mettre à jour.

Pour vous assurer que vous enregistrez la valeur d'état mise à jour, placez le journal dans la fonction de rappel setState(), qui s'exécute une fois le changement d'état terminé :

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});
Copier après la connexion

Cette modification garantit que l'instruction console.log s'exécute uniquement après la mise à jour de l'état, affichant ainsi le total correct.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal