Wie behebt man den Fehler „Eine Aktualisierung des React-Status für eine nicht gemountete Komponente kann nicht durchgeführt werden'?

Identifizierung der problematischen Komponente

Der in der Browserkonsole bereitgestellte Stack-Trace gibt die Komponente an, die für die Statusaktualisierungsverletzung verantwortlich ist. Jede Zeile im Stack-Trace stellt einen Funktionsaufruf dar, wobei der Komponentenname oder der Klassenkonstruktor in Klammern angegeben ist:

• in TextLayerInternal (erstellt von Context.Consumer)
• in TextLayer ( erstellt von PageInternal)

Dies deutet darauf hin, dass die TextLayer-Komponente versucht, ihren Status nachträglich zu aktualisieren nicht gemountet.

Beheben des Statusaktualisierungsfehlers

Um das Problem zu beheben, sollten Sie sicherstellen, dass alle asynchronen Vorgänge abgebrochen oder abgeschlossen sind, bevor die Bereitstellung der Komponente in „componentWillUnmount“ aufgehoben wird. In Ihrem Fall geht es dabei um die Handhabung der drosselbaren Funktion setDivSizeThrottleable.

Überarbeiteter Code

In der überarbeiteten Book-Komponente haben Sie die folgenden Änderungen vorgenommen:

• setDivSizeThrottleable mit in eine abbrechbare Funktion konvertiert drossel.cancel().
• Eine Bereinigungsfunktion in „componentWillUnmount“ hinzugefügt, um die drosselbare Funktion abzubrechen.

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

Durch die ordnungsgemäße Handhabung des Abbruchs der drosselbaren Funktion können Sie verhindern, dass Verstoß gegen die Statusaktualisierung und beheben Sie den Fehler „Eine Aktualisierung des React-Status für eine nicht gemountete Komponente kann nicht durchgeführt werden“.

Das obige ist der detaillierte Inhalt vonWie behebt man 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!