Les écouteurs d'événements React affichent-ils des changements d'état inattendus dans les composants fonctionnels ?

Mauvais comportement des React Hooks avec l'écouteur d'événements

Dans cette enquête, nous rencontrons un problème lorsque nous travaillons avec React Hooks. Lorsque vous utilisez un écouteur d'événements pour gérer un clic sur un bouton, le journal de la console affiche un état incorrect.

Description du problème

Dans le CodeSandbox fourni, respectez les étapes suivantes :

1. Cliquez deux fois sur le bouton "Ajouter une carte" pour créer deux cartes.
2. Pour la première carte, cliquez sur "Bouton1" et vérifiez dans la console qu'elle enregistre correctement la présence de deux cartes.
3. Pour la première carte, cliquez sur « Bouton2 », qui est contrôlé par un écouteur d'événement. Observez que la console n'affiche désormais qu'une seule carte.

Ce comportement est inattendu, car le "Bouton2" de la première carte devrait également afficher la présence de deux cartes.

Ce problème provient d'une gestion différente des gestionnaires d'événements dans les composants CardsProvider et Card.

• CardsProvider : Les gestionnaires d'événements sont recréé à chaque rendu du composant, faisant référence à un état obsolète une fois défini.
• Carte : Les gestionnaires d'événements sont enregistrés lors du montage du composant et reçoivent un nouvel état lorsqu'ils sont transmis en tant qu'accessoires. Cependant, un gestionnaire d'événements (handleCardClick) n'est enregistré qu'une seule fois et fait perpétuellement référence à un état obsolète.

Approches de solution

La résolution de ce problème nécessite un examen attentif de approches de gestion des événements dans les composants fonctionnels à l’aide du hook useState. Voici plusieurs options :

1. État mutable :

Utilisez useRef au lieu de useState pour introduire un objet mutable qui contient l'état actuel. Bien que cette approche permette une mutation directe de l'état, elle va à l'encontre des pratiques recommandées pour le développement de React.

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

Chaque fois qu'un écouteur d'événement est enregistré, transmettez une fonction de mise à jour d'état qui reçoit l'état frais au lieu de l'état obsolète de la portée englobante. Cela garantit que l'écouteur d'événement a toujours accès à l'état le plus à jour.

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

Réenregistrez l'écouteur d'événement à chaque fois que l'état change. Cela garantit que le rappel reçoit toujours les dernières informations d'état.

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

Pour les écouteurs d'événements dans la portée du composant, utilisez la gestion des événements intégrée de React en définissant l'écouteur d'événements directement dans le JSX. Cela élimine le besoin de useEffect et garantit que l'écouteur d'événement reçoit toujours l'état actuel.

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!