Warum ist „this' innerhalb einer React-Komponentenfunktion undefiniert?

React: „this“ ist innerhalb einer Komponentenfunktion undefiniert

Beim Arbeiten mit Komponenten in React kann der Fehler „this is“ auftreten undefiniert“ innerhalb einer in der Komponente definierten Funktion. Dies kann verwirrend sein, da sich dies laut offizieller Dokumentation auf die Komponenteninstanz beziehen sollte. Warum tritt dieser Fehler auf?

Das Problem liegt in der Art und Weise, wie React Klassenkomponenten initialisiert. Im Gegensatz zu ES5-Klassen im alten Stil binden ES6 React-Komponenten Klassenmethoden nicht automatisch an die Instanz. Das heißt, wenn Sie eine Funktion in einer Komponente definiert haben, beispielsweise einen Event-Handler, verweist diese innerhalb dieser Funktion nicht auf die Komponente.

Um dieses Problem zu beheben, müssen Sie die Methode manuell an die Komponente binden Instanz im Konstruktor. So würden Sie es in Ihrem Beispiel machen:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Durch die Bindung der onToggleLoop-Methode an die Komponente im Konstruktor stellen Sie sicher, dass sich diese auf die Komponente bezieht, wenn die Methode vom Event-Handler aufgerufen wird. Dadurch können Sie innerhalb der Methode auf den Status und die Requisiten der Komponente zugreifen.

Denken Sie daran, alle Klassenmethoden, die Zugriff auf die Komponenteninstanz benötigen, im Konstruktor zu binden, um den Fehler „Dies ist undefiniert“ zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum ist „this' innerhalb einer React-Komponentenfunktion undefiniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!