Zeigen React-Ereignis-Listener unerwartete Zustandsänderungen innerhalb funktionaler Komponenten an?

Falsches Verhalten von React Hooks mit Event Listener

Bei dieser Untersuchung stoßen wir auf ein Problem bei der Arbeit mit React Hooks. Wenn Sie einen Ereignis-Listener zur Verarbeitung eines Schaltflächenklicks verwenden, zeigt das Konsolenprotokoll einen falschen Status an.

Problembeschreibung

Befolgen Sie in der bereitgestellten CodeSandbox die folgenden Schritte :

1. Klicken Sie zweimal auf die Schaltfläche „Karte hinzufügen“, um zwei Karten zu erstellen.
2. Klicken Sie für die erste Karte auf „Button1“ und überprüfen Sie in der Konsole, ob das Vorhandensein von korrekt protokolliert wird zwei Karten.
3. Klicken Sie für die erste Karte auf „Button2“, was von einem Ereignis-Listener gesteuert wird. Beachten Sie, dass die Konsole jetzt nur eine Karte anzeigt.

Dieses Verhalten ist unerwartet, da „Button2“ für die erste Karte auch das Vorhandensein von zwei Karten anzeigen sollte.

Dieses Problem ist auf die unterschiedliche Behandlung von Ereignishandlern in den Komponenten CardsProvider und Card zurückzuführen.

• CardsProvider: Ereignishandler sind Wird jedes Mal neu erstellt, wenn die Komponente gerendert wird, und verweist auf einen veralteten Zustand, wenn er definiert ist.
• Karte: Ereignishandler werden beim Mounten der Komponente registriert und erhalten einen neuen Status, wenn sie als Requisiten übergeben werden. Allerdings wird ein Ereignishandler (handleCardClick) nur einmal registriert und verweist ständig auf den veralteten Zustand.

Lösungsansätze

Die Lösung dieses Problems erfordert eine sorgfältige Prüfung Event-Handling-Ansätze in Funktionskomponenten mithilfe des useState-Hooks. Hier gibt es mehrere Möglichkeiten:

1. Veränderbarer Status:

Verwenden Sie useRef anstelle von useState, um ein veränderbares Objekt einzuführen, das den aktuellen Status enthält. Dieser Ansatz ermöglicht zwar eine direkte Zustandsmutation, widerspricht jedoch den empfohlenen Vorgehensweisen für die React-Entwicklung.

2. Statusaktualisierungsfunktion:

Immer wenn ein Ereignis-Listener registriert wird, übergeben Sie eine Statusaktualisierungsfunktion, die den neuen Status anstelle des veralteten Status aus dem umschließenden Bereich empfängt. Dadurch wird sichergestellt, dass der Ereignis-Listener immer Zugriff auf den aktuellsten Stand hat.

3. Manuelle Neuregistrierung des Ereignis-Listeners:

Registrieren Sie den Ereignis-Listener jedes Mal neu, wenn sich der Status ändert. Dadurch wird sichergestellt, dass der Rückruf immer die aktuellsten Statusinformationen erhält.

4. Integrierte Ereignisbehandlung:

Für Ereignis-Listener innerhalb des Komponentenbereichs nutzen Sie die integrierte Ereignisbehandlung von React, indem Sie den Ereignis-Listener direkt im JSX definieren. Dadurch entfällt die Notwendigkeit von useEffect und es wird sichergestellt, dass der Event-Listener immer den aktuellen Status erhält.

Das obige ist der detaillierte Inhalt vonZeigen React-Ereignis-Listener unerwartete Zustandsänderungen innerhalb funktionaler Komponenten an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!