Pourquoi « ceci » n'est-il pas défini dans une fonction de composant React ?

React : "this" n'est pas défini dans une fonction de composant

Lorsque vous travaillez avec des composants dans React, vous pouvez rencontrer l'erreur "this is undefined" au sein d'une fonction définie dans le composant. Cela peut prêter à confusion puisque, selon la documentation officielle, cela devrait faire référence à l'instance du composant. Alors, pourquoi cette erreur se produit-elle ?

Le problème réside dans la façon dont React initialise les composants de classe. Contrairement aux anciennes classes ES5, les composants ES6 React ne lient pas automatiquement les méthodes de classe à l'instance. Cela signifie que si vous avez une fonction définie dans un composant, comme un gestionnaire d'événements, celle-ci dans cette fonction ne fera pas référence au composant.

Pour résoudre ce problème, vous devez lier manuellement la méthode au composant. instance dans le constructeur. Voici comment procéder dans votre exemple :

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

}

En liant la méthode onToggleLoop au composant dans le constructeur, vous vous assurez que this fait référence au composant lorsque la méthode est appelée depuis le gestionnaire d'événements. Cela vous permet d'accéder à l'état et aux accessoires du composant dans la méthode.

N'oubliez pas de lier toutes les méthodes de classe qui ont besoin d'accéder à l'instance du composant dans le constructeur pour éviter l'erreur « ceci n'est pas défini ».

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!