Comment résoudre l'erreur « Impossible de lire la propriété non définie » dans la fonction map de React ?

Comprendre l'erreur « Impossible de lire la propriété non définie » dans la fonction map de React

Dans le développement de React, il est courant de rencontrer l'erreur « TypeError : Impossible de lire la propriété 'onPlayerScoreChange' de undefined" lors de l'utilisation de la fonction map. Ce problème survient généralement en raison d'un processus de liaison incorrect de la fonction map.

Context

Dans le code fourni, nous avons une structure de composants hiérarchique avec les composants suivants :

• Parent : App
• Enfant : Joueur
• Petit-enfant : Compteur

La méthode "onPlayerScoreChange" est définie dans le composant App et est destiné à mettre à jour le score d'un joueur en fonction des entrées de l'utilisateur.

Le problème

L'erreur se produit dans la fonction de carte du composant "App", où le " La prop onScoreChange" est affectée à la méthode "onPlayerScoreChange" du composant App :

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

Cependant, le contexte de la fonction map est distinct du contexte du composant React. Par conséquent, "this" à l'intérieur de la fonction fait référence à autre chose que le composant App, ce qui rend "this.onPlayerScoreChange" indéfini.

La solution

Pour résoudre ce problème problème, nous devons lier la fonction map au contexte du composant App. Ceci peut être réalisé soit en utilisant les fonctions fléchées (lambda), soit en utilisant la méthode de liaison.

Utilisation des fonctions fléchées

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

Les fonctions fléchées lient automatiquement la valeur « this » à la portée environnante, éliminant ainsi le besoin d'une liaison explicite.

Utilisation de la méthode Bind

{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)}
        />
    )
}.bind(this))}

La méthode bind lie explicitement la fonction map au contexte du composant App .

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!