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

Gestion de "This" non défini dans les fonctions de composant React

Cette question découle d'un problème où "this" n'est pas défini dans une fonction de composant de un composant React.

Dans l'exemple fourni, le problème se produit dans la fonction onToggleLoop. Lorsque cette fonction est exécutée, "this" n'est pas défini dans le composant. En effet, React ne lie pas automatiquement les méthodes au composant.

Pour résoudre ce problème, nous devons lier manuellement la méthode dans le constructeur à l'aide de la fonction bind(this). Voici comment procéder :

constructor(props) {
  super(props);

  this.state = {
    loopActive: false,
    shuffleActive: false,
  };

  this.onToggleLoop = this.onToggleLoop.bind(this);
}

En liant la méthode onToggleLoop dans le constructeur, nous garantissons que lors de son exécution, "this" fera référence à l'instance du composant. Cela nous permet d'accéder à l'état et aux accessoires du composant au sein de cette fonction.

Une fois cette modification effectuée, l'objet "this" ne sera plus indéfini dans la fonction onToggleLoop, et vous devriez pouvoir mettre à jour le loopActive. état comme prévu.

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!