Pourquoi « ceci » n'est-il pas défini dans les fonctions des composants React et comment puis-je y remédier ?

Comprendre « ceci » dans les fonctions des composants React

Lorsque vous travaillez avec React, vous pouvez rencontrer l'erreur « ceci n'est pas défini dans une fonction de composant ». Cela se produit lorsque vous tentez d'accéder à cet objet dans une fonction de composant et qu'il n'est pas défini.

Dans ES6 React.Component, les méthodes ne sont pas automatiquement liées au composant lui-même. Au lieu de cela, vous devez les lier explicitement dans le constructeur. Pour résoudre le problème mentionné dans l'exemple, vous pouvez utiliser les étapes suivantes :

1. Lier la méthode dans le constructeur :
   Dans le constructeur, ajoutez le ligne suivante pour lier la méthode onToggleLoop :

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

2. Mettre à jour le Composant :
   Mettez à jour votre composant avec le constructeur modifié comme suit :

   class PlayerControls extends React.Component {
     constructor(props) {
       super(props)
   
       this.state = {
         loopActive: false,
         shuffleActive: false,
       }
   
       this.onToggleLoop = this.onToggleLoop.bind(this);
     }
   
     // ... rest of the code
   }

En liant la méthode onToggleLoop dans le constructeur, vous vous assurez que cela fait référence au bon instance du composant lorsque la méthode est invoquée. Cela vous permet de mettre à jour avec succès l'état loopActive et d'exécuter le prop onToggleLoop transmis par le composant parent.

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!