Pourquoi « setState » ne met-il pas à jour immédiatement l'état de mon composant React ?

Pourquoi l'appel de la méthode setState ne mute pas l'état immédiatement

Le problème

Bien qu'il semble suivre correctement les conventions, le code fourni rencontre un problème inattendu comportement où la variable d'état (barClubLounge) ne reflète pas immédiatement la valeur souhaitée après l'appel de setState. La valeur opposée est renvoyée, laissant le développeur dans un état déroutant.

Nature asynchrone de setState

Le nœud de ce problème réside dans la nature asynchrone de la méthode setState. Contrairement aux affectations normales, setState ne mute pas immédiatement l'état. Au lieu de cela, il planifie une mise à jour de l'état qui sera gérée ultérieurement par le processus de réconciliation interne de React. Cela permet à React d'optimiser et de mettre à jour l'état par lots pour améliorer les performances et éviter les nouveaux rendus inutiles.

Conséquences des mises à jour d'état asynchrones

En raison du comportement asynchrone, il n'est pas possible de récupérer l'état mis à jour valeur immédiatement après avoir appelé setState. Si vous essayez de lire la variable d'état (this.state.barClubLounge) directement après l'avoir définie, vous risquez de vous retrouver avec l'ancienne valeur jusqu'à ce que la mise à jour de l'état soit terminée.

Solution : Utilisation d'une méthode de rappel

Pour contourner ce problème et vérifier la valeur d'état mise à jour juste après l'appel setState, React fournit une méthode de rappel. En transmettant une fonction comme rappel à setState, vous pouvez effectuer n'importe quelle action ou vérifier l'état mis à jour dans ce rappel, en vous assurant que la valeur de l'état a été effectivement mise à jour.

Exemple

Voici un exemple en utilisant la méthode de rappel :

this.setState({ barClubLounge: event.target.checked }, () => {
  console.log('Updated state value: ', this.state.barClubLounge);
});

Maintenant, le rappel ne s'exécutera qu'une fois la mise à jour setState terminée, donnant accès au dernier état valeur.

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!