Comment lier correctement les fonctions dans les itérations de React Map ?

Fonctions de liaison dans les itérations de la carte React

Énoncé du problème

Lors de l'utilisation de la fonction map dans React, les développeurs peuvent rencontrer l'erreur « TypeError : impossible lire la propriété de non défini." Cette erreur se produit lorsqu'une méthode spécifique, telle que onPlayerScoreChange, est appelée dans la fonction map, mais qu'elle n'a pas été liée correctement.

Comprendre la hiérarchie des composants

Dans l'application React donnée, le le flux de données et la hiérarchie des composants sont structurés comme suit :

• Composant grand-parent : L'application interagit avec le composant petit-enfant et gère la méthode onPlayerScoreChange.
• Enfant Composant : Le joueur reçoit les données du grand-parent et les transmet au composant petit-enfant.
• Composant petit-enfant : Le compteur gère les entrées de l'utilisateur et interagit avec la méthode onPlayerScoreChange dans le composant grand-parent.

Fonctions de liaison pour les fonctions de carte

L'erreur se produit car la méthode onPlayerScoreChange n'est pas liée correctement dans la fonction de carte dans le composant grand-parent. La liaison est essentielle lors de l'utilisation de fonctions dans des itérations de carte, car le contexte de la fonction de carte diffère du contexte du composant React. Par conséquent, cela dans la fonction map ne fait pas référence au composant React, ce qui entraîne des problèmes d'accès à ses propriétés.

Il existe deux manières courantes de résoudre ce problème :

Utiliser les fonctions fléchées

Les fonctions fléchées lient implicitement le contexte du composant. Dans ce cas, le code suivant résoudrait l'erreur :

<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>

Utilisation explicite de la liaison de fonction

Une autre approche consiste à lier explicitement la fonction à l'aide de la méthode bind. Ceci peut être réalisé en passant le contexte this du composant comme argument à la méthode bind :

<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)}
                    />
                )
            })}</code>

En employant l'une de ces méthodes pour lier la méthode onPlayerScoreChange dans l'itération de la carte, l'erreur doit être résolue. .

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!