Warum ist der Status falsch, wenn Ereignisse mit Ereignis-Listenern in React Hooks verarbeitet werden?

Falsches React Hooks-Verhalten mit Event-Listener

Problem: Bei der Verwendung von React Hooks und der Verarbeitung von Ereignissen mit Event-Listenern wird der Status in der Konsole angezeigt ist falsch. Insbesondere sollte beim Klicken auf eine Schaltfläche innerhalb einer Karte der aktualisierte Status (Anzahl der Karten) angezeigt werden, der ursprüngliche Status wird jedoch fälschlicherweise angezeigt.

Code-Erklärung:

Das Problem entsteht aufgrund der Art und Weise, wie Ereignis-Listener mithilfe des useState-Hooks in Funktionskomponenten registriert werden. Im bereitgestellten Beispiel ist die Funktion „handleCardClick“ in der Funktionskomponente „CardsProvider“ definiert und verweist beim Aufruf immer auf den Anfangszustand.

Andererseits ist „handleButtonClick“ in der Funktionskomponente „Card“ definiert und wird als übergeben Stütze. Da es bei jedem Rendern neu registriert wird, verweist es auf den neuen Zustand. Während handleCardClick den falschen Status anzeigt, zeigt handleButtonClick den richtigen Status an.

Lösungen:

1. Veränderlicher Zustand:

Verwenden Sie anstelle von useState useRef, um einen veränderlichen Zustand zu speichern. Dieser Ansatz wird jedoch nicht zum Aktualisieren des Status empfohlen, da es sich sowohl in Klassen- als auch in Funktionskomponenten um ein Anti-Pattern handelt.

2. Statusaktualisierungsfunktion:

Verwenden Sie eine Statusaktualisierungsfunktion innerhalb des Ereignis-Listeners, die den neuen Status anstelle des veralteten Status empfängt.

3. Manuelle Neuregistrierung des Ereignis-Listeners:

Registrieren Sie den Ereignis-Listener jedes Mal neu und stellen Sie sicher, dass er Zugriff auf den neuesten Status hat.

4. Integrierte Ereignisbehandlung:

Verwenden Sie die integrierte Ereignisbehandlung von React, indem Sie den Ereignis-Listener direkt an den DOM-Ereignishandler übergeben, z. B. onClick={eventListener}.

Hinweis:In der endgültigen Version von React 16.8 unterstützt useState nur unveränderliche Zustände. Daher ist die in der ursprünglichen Antwort beschriebene Lösung für veränderliche Zustände nicht mehr anwendbar.

Das obige ist der detaillierte Inhalt vonWarum ist der Status falsch, wenn Ereignisse mit Ereignis-Listenern in React Hooks verarbeitet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!