Pourquoi ne puis-je pas lire la propriété \'onPlayerScoreChange\' à l'aide de \'map\' dans React ?

Dévoilement de la cause de l'erreur « Impossible de lire la propriété » dans React lors de l'utilisation de « map »

Lorsque vous travaillez avec React, vous rencontrez l'erreur " TypeError : Impossible de lire la propriété 'onPlayerScoreChange' de non défini" peut être frustrant. Cela se produit généralement en raison d'une liaison insuffisante de la fonction en question.

Dans le code fourni, 'onPlayerScoreChange' est une méthode qui s'exécute lorsque le score d'un joueur est modifié. Cette méthode réside dans le composant Grandparent. Cependant, un examen révèle un oubli dans la liaison de « onPlayerScoreChange » dans la fonction « map » du composant Parent.

Comprendre le contexte de « ce »

Pour comprendre ce problème, nous devons approfondir le contexte « ce » dans les fonctions JavaScript. Lorsque vous utilisez une expression « this » dans une fonction ordinaire (fonction non-flèche), sa valeur dépendra de la manière dont la fonction a été appelée. Par conséquent, lors de l'exécution de « this.onPlayerScoreChange » dans la fonction « map », « this » fera référence au contexte d'exécution de la fonction « map », et non au contexte du composant parent.

Résoudre le problème de liaison

Pour résoudre ce problème, nous devons nous assurer que « onPlayerScoreChange » est lié au contexte du composant Parent afin que « this » fasse correctement référence au composant Parent. Ceci peut être réalisé de deux manières :

Option 1 : Fonctions fléchées

Les fonctions fléchées héritent de leur contexte « ceci » de leur portée lexicale immédiate, éliminant ainsi le besoin de termes explicites. obligatoire. En remplaçant la fonction régulière dans la « carte » par une fonction de flèche, le contexte « ce » pointera automatiquement vers le composant Parent :

{this.state.initialPlayers.map((player, index) => {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
})}

Option 2 : Méthode de liaison

Alternativement, la fonction régulière peut être liée au contexte du composant Parent à l'aide de la méthode 'bind'. Cette approche implique de spécifier explicitement la valeur de « this » lors de l'appel de la fonction :

{this.state.initialPlayers.map(function(player, index) {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
}.bind(this))}

Conclusion

En implémentant une liaison de fonction appropriée, vous pouvez résoudre efficacement le " Impossible de lire la propriété 'onPlayerScoreChange' de l'erreur non définie" dans React lors de l'utilisation de la fonction 'map'.

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!