Warum ist die Funktion „this.setState“ von React im ComponentDidMount-Callback nicht verfügbar?

„React this.setState is not a function“ Problem: Kontextbindung

Beim Versuch, eine Anwendung mithilfe einer Drittanbieter-API zu entwickeln , ein häufiger Fehler ist „TypeError: this.setState ist keine Funktion.“ Dies tritt auf, wenn versucht wird, API-Antworten zu verarbeiten. Das Problem ist typischerweise auf eine falsche Bindung zurückzuführen.

Der bereitgestellte React-Code definiert eine Komponente namens AppMain mit einer ComponentDidMount-Methode. Bei dieser Methode wird ein VK-API-Aufruf durchgeführt, um Benutzerinformationen abzurufen. Innerhalb der Rückruffunktion der API-Antwort wird versucht, mit this.setState den Status der Komponente zu aktualisieren. Der Fehler tritt jedoch auf, weil die Rückruffunktion in einem anderen Kontext ausgeführt wird und keinen Zugriff auf this.setState hat.

Lösung:

Um dieses Problem zu beheben, Die Callback-Funktion muss an den richtigen Kontext gebunden sein. Dies kann durch die Verwendung der .bind-Methode erreicht werden:

VK.api('users.get', { fields: 'photo_50' }, function(data) {
  if (data.response) {
    this.setState({ // the error happens here
      FirstName: data.response[0].first_name
    });
    console.info(this.state.FirstName);
  }
}.bind(this));

Durch die Bindung der Callback-Funktion an die Komponenteninstanz verweist das Schlüsselwort this in der Callback-Funktion auf die Komponenteninstanz und ermöglicht so den Zugriff auf deren Methoden und Eigenschaften, einschließlich this.setState.

Zusätzliche Bindung:

In einigen Fällen kann eine zusätzliche Bindung erforderlich sein. Wenn beispielsweise die VK-Init-Methode auch innerhalb von ComponentDidMount aufgerufen wird, muss diese Methode auch an die Komponenteninstanz gebunden sein:

VK.init(function() {
  console.info("API initialisation successful");
  VK.api('users.get', { fields: 'photo_50' }, function(data) {
    if (data.response) {
      this.setState({ // the error happens here
        FirstName: data.response[0].first_name
      });
      console.info(this.state.FirstName);
    }
  }.bind(this));
}.bind(this), function() {
  console.info("API initialisation failed");
}, '5.34');

Das obige ist der detaillierte Inhalt vonWarum ist die Funktion „this.setState“ von React im ComponentDidMount-Callback nicht verfügbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!