Comment corriger \"TypeError : impossible de lire la propriété non définie\" avec la fonction Map dans React

Erreur « Impossible de lire la propriété non définie » dans React avec la fonction Map

Dans les applications React, rencontre du message d'erreur « TypeError : Impossible de lire la propriété « onPlayerScoreChange » de non définie " indique généralement un problème de liaison lors de l'utilisation de la fonction map. Voici comment résoudre ce problème :

La fonction map crée un nouveau tableau en itérant sur un tableau existant et en appelant une fonction de rappel pour chaque élément. Dans la fonction de rappel, cela fait référence au contexte global, et non au contexte du composant React. Par conséquent, sans liaison appropriée, l'accès aux propriétés du composant React à partir de la fonction de rappel entraînera l'erreur « non définie ».

Pour résoudre ce problème, vous pouvez soit utiliser les fonctions fléchées, soit lier la fonction de rappel au React. contexte du composant.

Avec les fonctions fléchées :

Les fonctions fléchées héritent du contexte de la fonction environnante, vous pouvez donc simplement utiliser une fonction fléchée pour le rappel de la carte :

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

Avec Bind :

Alternativement, vous pouvez lier manuellement la fonction de rappel de carte au contexte du composant React :

<code class="javascript">{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)}</code>

En implémentant soit de ces méthodes, le contexte this sera correctement lié, vous permettant d'accéder aux propriétés du composant React dans la fonction de rappel map et d'éviter l'erreur "non définie".

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!