Warum führt die Verwendung von „setInterval' mit React State Hooks zu unerwartetem Verhalten?

Verwenden von React State Hooks mit setInterval: Verständnis des Statusaktualisierungsproblems

In React kann die Verwendung des State Hooks innerhalb von setInterval zu Problemen mit führen Zustandsaktualisierungen. Dies tritt auf, wenn die an setInterval übergebene Rückruffunktion den Zugriff auf den Anfangszustandswert behält und verhindert, dass nachfolgende Aktualisierungen berücksichtigt werden.

Das Problem

Bedenken Sie die folgende Uhrkomponente:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

Das Problem liegt in der Rückruffunktion setTime. Es verweist auf die Zeitvariable zum Zeitpunkt des ersten Renderings, nicht auf den aktualisierten Wert aus nachfolgenden Renderings. Dadurch ist die Zustandsaktualisierung auf den Anfangswert beschränkt.

Die Lösung

Um dieses Problem zu beheben, verwenden Sie das Rückrufformular des Status-Hooks, der Folgendes bereitstellt Zugriff auf den aktuellen Statuswert:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime((prevTime) => prevTime + 1); // Get the latest state value
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

Jetzt verwendet die Rückruffunktion korrekt den neuesten Statuswert und stellt sicher, dass die Zeit aktualisiert wird erwartet.

Alternative Ansätze

Dan Abramov erkundet in seinem Blogbeitrag andere Möglichkeiten, setInterval mit Hooks zu handhaben, und bietet alternative Ansätze an, die für bestimmte Szenarien geeignet sein könnten.

Das obige ist der detaillierte Inhalt vonWarum führt die Verwendung von „setInterval' mit React State Hooks zu unerwartetem Verhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!