Warum wird mein Reaktionsstatus nicht innerhalb von „setInterval' aktualisiert?

Status wird bei Verwendung des React State Hook innerhalb von setInterval nicht aktualisiert

Innerhalb der neuen Hooks-Funktion von React ist die Clock-Komponente so konzipiert, dass sie einen Zeitwert anzeigt das erhöht sich jede Sekunde. Trotz der Funktion des Timers stagniert der Zeitwert bei eins.

Die Ursache des Problems

Die Wurzel dieses Problems liegt in der Schließung von setInterval. Die Callback-Funktion innerhalb dieses Abschlusses hat nur Zugriff auf den Anfangswert der Zeitvariablen. Da die Funktion useEffect() nach dem ersten Rendern nicht ausgeführt wird, erhält der Rückruf keine nachfolgenden Zeitwerte.

Zeitwertzugriff

Folglich ist die Zeitvariable immer trägt den Anfangswert Null im Callback für setInterval.

Lösung: Verwendung der Callback-Form des Zustands Hooks

Ähnlich wie die herkömmliche setState-Methode bieten State-Hooks zwei Optionen: Die erste akzeptiert einen aktualisierten Status, während das Callback-Formular den aktuellen Status empfängt. Um dieses Problem zu beheben, wird empfohlen, das Rückrufformular zu verwenden und den neuesten Statuswert abzurufen, bevor er innerhalb des setState-Rückrufs inkrementiert wird.

Alternative Ansätze

Blogbeitrag von Dan Abramov befasst sich intensiv mit der Verwendung von setInterval mit Hooks und stellt verschiedene Lösungen für dieses Problem vor. Es wird dringend empfohlen, es zu lesen.

Aktualisierter Code

Der folgende Code zeigt die korrigierte Implementierung:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (<div>Seconds: {time}</div>);
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

Das obige ist der detaillierte Inhalt vonWarum wird mein Reaktionsstatus nicht innerhalb von „setInterval' aktualisiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!