Ereignis-Listener und React-Hooks

Problem: Bei Verwendung von React-Hooks und Ereignis-Listenern zeigt das Statuskonsolenprotokoll falsche Informationen an.

Problembeschreibung

Beachten Sie die bereitgestellte CodeSandbox: https://codesandbox.io/s/lrxw1wr97m. Wenn Sie zweimal auf die Schaltfläche „Karte hinzufügen“ klicken und dann in der ersten Karte auf „Schaltfläche 1“ klicken, zeigt die Konsole den Status mit zwei Karten korrekt an. Wenn Sie jedoch in derselben Karte auf „Button2“ klicken (was von einem Ereignis-Listener verarbeitet wird), zeigt die Konsole fälschlicherweise nur eine Karte im Status an.

Grund für falschen Status

Die Das Problem ergibt sich aus der unterschiedlichen Behandlung von Ereignishandlern in den Komponenten CardsProvider und Card. Die in der CardsProvider-Funktionskomponente definierten Ereignishandler handleCardClick und handleButtonClick werden bei jedem Rendern der Komponente neu definiert. Dies bedeutet, dass sie sich auf den Status zum Zeitpunkt ihrer Definition beziehen, der veraltet sein kann, wenn der Ereignis-Listener ausgelöst wird.

Andererseits verwendet die Card-Komponente useRef, um den Ereignis-Listener zu registrieren, der bestehen bleibt über den gesamten Lebenszyklus der Komponente. Daher bezieht sich die Ereignis-Listener-Funktion auf den Status zum Zeitpunkt der Bereitstellung der Komponente, der veraltet ist.

Lösung – Verwendung der Statusaktualisierungsfunktion

Eine Lösung besteht in der Verwendung eines Statusaktualisierungsprogramms Funktion, die den neuen Status als Argument empfängt, anstatt sich auf den veralteten Status aus dem umschließenden Bereich zu verlassen:

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 () => {
    // ...
  };
}, []);

In diesem Szenario empfängt der Ereignis-Listener den neuen Status, wodurch das Problem mit veralteten Daten beseitigt wird. Es ist jedoch wichtig zu beachten, dass die Statusaktualisierungsfunktion denselben Status zurückgeben kann, um unnötige Aktualisierungen zu verhindern. Verwenden Sie console.log innerhalb der Statusaktualisierungsfunktion, um die Statusänderungen zu beobachten.

Andere Lösungen

Alternative Möglichkeiten zur Behebung dieses Problems sind:

• Mutable Status: Verwenden von useRef anstelle von useState.
• Manuelle Neuregistrierung des Ereignis-Listeners: Neuregistrierung des Ereignis-Listeners bei jeder Statusänderung.
• Integrierte Ereignisbehandlung: Verwendung der integrierten Ereignisbehandlung von React anstelle benutzerdefinierter Ereignis-Listener.