Pourquoi l'état est-il incorrect lors de la gestion d'événements avec des écouteurs d'événements dans React Hooks ?

Comportement incorrect des React Hooks avec l'écouteur d'événements

Problème : Lors de l'utilisation de React Hooks et de la gestion des événements avec les écouteurs d'événements, l'état affiché dans la console est incorrect. Plus précisément, cliquer sur un bouton à l'intérieur d'une carte devrait afficher l'état mis à jour (nombre de cartes), mais cela affiche incorrectement l'état d'origine.

Explication du code :

Le problème survient en raison de la façon dont les écouteurs d’événements sont enregistrés dans les composants fonctionnels à l’aide du hook useState. Dans l'exemple fourni, la fonction handleCardClick est définie dans le composant fonctionnel CardsProvider et fait toujours référence à l'état initial lorsqu'elle est appelée.

D'autre part, handleButtonClick est défini dans le composant fonctionnel Card et est transmis en tant que soutenir. Puisqu'il est réenregistré à chaque rendu, il fait référence au nouvel état. Par conséquent, alors que handleCardClick affiche le mauvais état, handleButtonClick affiche le bon état.

Solutions :

1. État mutable :

Au lieu de useState, utilisez useRef pour stocker un état mutable. Cependant, cette approche n'est pas recommandée pour la mise à jour de l'état, car il s'agit d'un anti-modèle dans les composants de classe et de fonction.

2. Fonction de mise à jour d'état :

Utilisez une fonction de mise à jour d'état à l'intérieur de l'écouteur d'événement qui reçoit l'état frais au lieu de l'état obsolète.

3. Réenregistrement manuel de l'écouteur d'événement :

Réenregistrez l'écouteur d'événement à chaque fois, en vous assurant qu'il a accès au dernier état.

4. Gestion des événements intégrée :

Utilisez la gestion des événements intégrée de React en transmettant l'écouteur d'événement directement dans le gestionnaire d'événements DOM, tel que onClick={eventListener}.

Remarque : Dans la version finale de React 16.8, useState ne prend en charge que l'état immuable. Par conséquent, la solution d'état mutable décrite dans la réponse originale n'est plus applicable.

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!