Wie löse ich den Fehler „Eine Aktualisierung des React-Status für eine nicht gemountete Komponente kann nicht durchgeführt werden'?

Ein React-State-Update für eine nicht gemountete Komponente kann nicht durchgeführt werden

Problem

Wann Bei der Arbeit mit React kann es zu der Fehlermeldung „Eine React-Statusaktualisierung kann für eine nicht gemountete Komponente nicht durchgeführt werden“ kommen. Dieser Fehler tritt normalerweise auf, wenn Sie versuchen, den Status einer Komponente zu aktualisieren, nachdem sie vom DOM abgemeldet wurde.

Identifizieren der fehlerhaften Komponente

Aus dem Stack-Trace: Sie können die für den Fehler verantwortliche Komponente identifizieren, indem Sie den Aufrufstapel zurückverfolgen, um die Komponente zu finden, die setState(...) aufgerufen hat, nachdem sie ausgehängt wurde. Die fehlerhafte Komponente wird im Stack-Trace als „componentName.prototype.setState“ aufgeführt.

Beheben des Problems

Um diesen Fehler zu beheben, gibt es mehrere Ansätze, die Sie wählen können :

1. Asynchrone Aufgaben abbrechen: Wenn Sie asynchrone Aufgaben haben, B. Abrufe oder Zeitüberschreitungen, die in der Komponente ausgeführt werden, brechen Sie diese in der Methode „componentWillUnmount“ ab. Diese Aufgaben können weiterhin ausgeführt werden, nachdem die Komponente nicht gemountet wurde, was dazu führt, dass Statusaktualisierungen auf einer nicht gemounteten Komponente erfolgen.
2. Statusaktualisierungen schützen: Zustandsaktualisierungen in eine bedingte Prüfung einschließen, die sicherstellt, dass die Komponente vorhanden ist noch gemountet, bevor der Status aktualisiert wird. Zum Beispiel:

if (this.isMounted) {
  this.setState({ ... });
}

3. Verwenden Sie React Hooks: Wenn Sie React Hooks verwenden, können Sie eine Bereinigungsfunktion im useEffect-Hook verwenden, um alle asynchronen Aktionen abzubrechen Aufgaben ausführen und ein Mount-Flag umschalten. Dadurch wird sichergestellt, dass Statusaktualisierungen nur erfolgen, während die Komponente gemountet ist.

Beispiel (React Hooks)

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    try {
      const data = await fetch('...');
      if (isMounted) setState(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

Durch die Implementierung eines dieser Ansätze können Sie kann den Fehler „Eine React-Statusaktualisierung für eine nicht gemountete Komponente kann nicht durchgeführt werden“ verhindern und sicherstellen, dass Ihre Statusverwaltung mit dem Lebenszyklus der Komponente konsistent ist.

Das obige ist der detaillierte Inhalt vonWie löse ich den Fehler „Eine Aktualisierung des React-Status für eine nicht gemountete Komponente kann nicht durchgeführt werden'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!