Problème : Lors de l'utilisation de hooks React et d'écouteurs d'événements, le journal de la console d'état affiche des informations incorrectes.
Considérez le CodeSandbox fourni : https://codesandbox.io/s/lrxw1wr97m. Lorsque vous cliquez deux fois sur le bouton « Ajouter une carte », puis cliquez sur « Bouton1 » dans la première carte, la console affiche correctement l'état avec deux cartes. Cependant, si vous cliquez sur "Bouton2" dans la même carte (qui est gérée par un écouteur d'événement), la console n'affiche de manière incorrecte qu'une seule carte dans l'état.
Le Le problème provient du traitement différent des gestionnaires d'événements dans les composants CardsProvider et Card. Les gestionnaires d'événements définis dans le composant fonctionnel CardsProvider, handleCardClick et handleButtonClick, sont redéfinis à chaque fois que le composant est rendu. Cela signifie qu'ils font référence à l'état au moment où ils sont définis, qui peut être obsolète lorsque l'écouteur d'événement est déclenché.
D'autre part, le composant Card utilise useRef pour enregistrer l'écouteur d'événement, qui persiste tout au long du cycle de vie du composant. Par conséquent, la fonction d'écoute d'événements fait référence à l'état au moment où le composant a été monté, qui est obsolète.
Une solution consiste à utiliser un programme de mise à jour d'état. fonction qui reçoit le nouvel état comme argument, plutôt que de s'appuyer sur l'état obsolète de la portée englobante :
<code class="javascript">const eventListener = () => { // Function receives fresh state setState(freshState => freshState + 1); }; // Event listener is registered using `useEffect` to ensure it is only registered once useEffect(() => { // Register event listener // ... // Unregister event listener on component unmount return () => { // ... }; }, []);</code>
Dans ce scénario, l'écouteur d'événement reçoit le nouvel état, éliminant ainsi le problème des données obsolètes. Cependant, il est important de noter que la fonction de mise à jour d'état peut renvoyer le même état pour éviter les mises à jour inutiles. Utilisez console.log dans la fonction de mise à jour de l'état pour observer les changements d'état.
Les autres moyens de résoudre ce problème incluent :
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!