C'est une question populaire parmi tous les nouveaux développeurs de React, mais je ne suis pas en mesure de comprendre la logique derrière les solutions disponibles. J'essaie de mettre à jour la variable d'état à l'aide de crochets et d'essayer de lire la valeur mise à jour, mais elle renvoie toujours une valeur précédente au lieu d'une nouvelle valeur. Voici la séquence d'exécution de mon code.
const [accountId, setAccountId] = useState(0);
const setTransactionAccountId = e => {
console.log("Clicked ID:", e.currentTarget.value);
setAccountId(e.currentTarget.value);
console.log("accountId:", accountId);
};
en cliquant sur le bouton, il exécute le code ci-dessous et met à jour l'état mais la console.log affiche l'ancienne valeur.
onClick={setTransactionAccountId}
ID cliqué: 0 accountId: 0
ID cliqué: 1 accountId: 0
Quelqu'un pourrait-il s'il vous plaît me dire la raison de ce comportement et comment y faire face.
3 Réponses :
accountId n'aura pas été mis à jour ce rendu. Vous devez attendre le prochain rendu pour qu'il soit mis à jour. accountId n'est renseigné qu'en haut du composant de fonction lorsque useState est appelé. Vous êtes au milieu du rendu. Si vous avez besoin de la valeur réelle, continuez à l'extraire de e.currentTarget.value .
Je veux juste passer le accountId en tant qu'accessoire à un autre composant, donc je le mets à jour.Ainsi, selon ce que je comprends, en lisant votre commentaire, je peux toujours passer le accountId en tant qu'élément qui aura la dernière valeur après le clic sur le bouton, mais il restitue simplement l'ancien évaluer. ma compréhension est-elle correcte?
Ceci est dû au fait que setState est asynchrone. L'exécution de console.log ('accountId:', accountId) avant la mise à jour de l'état vous donnera toujours la valeur d'état précédente. Si vous ajoutez un async / await, cela devrait résoudre le problème.
const setTransactionAccountId = async (e) => {
console.log('Clicked ID:', e.currentTarget.value)
await setAccountId(e.currentTarget.value)
console.log('accountId:', accountId)
}
setAccountId ne renvoie pas de promesse. C'est donc une condition de course qui est vraiment mauvaise dans ce cas. C'est aussi complètement inutile puisque vous avez déjà la valeur de accoundId puisque vous venez de le définir, e.currentTarget.value .
Oui, je suis d'accord avec @EmileBergeron et j'ai essayé la solution que vous avez partagée par Andrea, mais je vois que l'ancienne valeur est imprimée dans la console.
Depuis react docs
React peut regrouper plusieurs appels setState () en une seule mise à jour pour performances.
Étant donné que this.props et this.state peuvent être mis à jour de manière asynchrone, vous ne doit pas se fier à leurs valeurs pour calculer l'état suivant.
Les mises à jour d'état peuvent être groupées et mises à jour de manière asynchrone, par conséquent l'état peut ne pas s'être mis à jour lorsque console.log () est appelé. Vous obtiendrez le résultat mis à jour garanti lors de votre prochain appel au hook useEffect.
vous voulez dire que useEffect résoudra ce problème?