Pourquoi mon état React n'est-il pas mis à jour immédiatement après un appel « setTimeout » ?

L'état ne se met pas à jour dans React : explorer le mystère setTimeout

La méthode setState() de React est souvent un sujet de confusion lorsqu'il s'agit de mise à jour déclarer immédiatement. Dans ce cas spécifique, un développeur rencontre un scénario dans lequel l'état ne se met pas à jour comme prévu.

Le développeur dispose d'un tableau de nombres, newDealersDeckTotal, qu'il accumule dans un total à l'aide de réduire(). Ils définissent ensuite l'état de dealersOverallTotal sur ce total dans une fonction setTimeout. Cependant, la journalisation de la valeur de l'état avant et après setTimeout donne des résultats incorrects.

La clé pour comprendre ce comportement réside dans la nature asynchrone de setState(). Bien qu'il puisse sembler que l'état doive être défini immédiatement, cette méthode est asynchrone, ce qui signifie qu'elle planifie une mise à jour de l'état qui peut ne pas être reflétée immédiatement. C'est pourquoi la console enregistrant l'état avant et après la fonction setTimeout donne des résultats différents.

Pour résoudre ce problème, le développeur peut utiliser la fonction de rappel de setState(), qui est exécutée une fois la mise à jour de l'état terminée. En plaçant l'instruction du journal de la console dans ce rappel, le développeur s'assure que l'état est mis à jour avant l'exécution du journal. Voici le code corrigé :

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

Avec cette solution, l'état sera reflété avec précision lors de l'exécution du journal de la console, fournissant le résultat attendu. Cette compréhension du comportement asynchrone dans la méthode setState() de React peut aider les développeurs à éviter des pièges similaires en matière de mise à jour d'état.

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!