Pourquoi mon React setState ne met-il pas à jour mon état immédiatement ?

React setState conserve un état obsolète

Problème

Dans cette application React, une variable d'état (dealersOverallTotal) ne se met pas à jour correctement. Le problème persiste même après avoir utilisé setTimeout pour retarder l'appel setState. Malgré les instructions console.log confirmant que la variable total contient la valeur correcte, dealersOverallTotal reste inchangé.

Solution

La cause première réside dans la nature asynchrone de la méthode setState. Lorsque console.log est utilisé pour inspecter l'état immédiatement après l'appel de setState, il récupère l'ancienne valeur d'état. Pour accéder à l'état mis à jour, la fonction de rappel fournie à setState peut être utilisée :

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

Dans le rappel, l'état mis à jour est garanti d'être disponible, garantissant une journalisation précise de la valeur de l'état. En suivant cette pratique, les développeurs peuvent compter en toute confiance sur la mise à jour de l'état lorsqu'ils y accèdent après un appel setState.

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!