Pourquoi « ceci » n'est-il pas défini dans la fonction de mon composant React et comment puis-je y remédier ?

React : "this" n'est pas défini à l'intérieur d'une fonction de composant

Problème :

Dans un composant React, une tentative d'accès à "this" à l'intérieur d'une méthode entraîne une erreur "indéfinie". Le composant possède un objet d'état, qui doit être accessible dans les méthodes. Le développeur s'attend à ce que « ceci » fasse référence à l'instance du composant, mais il reste indéfini.

Solution :

ES6 React.Component ne lie pas automatiquement les méthodes au composant lui-même. Pour résoudre ce problème, il est nécessaire de lier manuellement les méthodes au sein du constructeur :

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

}

En liant la méthode, "this" fera correctement référence à l'instance du composant, permettant l'accès à l'état et aux autres propriétés. Cela garantit que « ceci » est défini dans la méthode dans laquelle il est destiné à accéder aux données spécifiques au composant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!