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

Erreur « Impossible de lire la propriété non définie » dans React lors de l'utilisation de map

Problème :

Les utilisateurs rencontrent l'erreur « TypeError : Impossible de lire la propriété 'onPlayerScoreChange' de l'erreur non définie" dans les applications React, malgré une liaison de fonction apparemment correcte.

Réponse :

Le problème réside dans l'utilisation de la carte lorsque passer une fonction en tant que propriété. Sans lier la fonction dans la carte, le contexte de cela change et les propriétés du composant React deviennent inaccessibles.

Options de liaison :

Pour résoudre ce problème, on peut utiliser soit fonctions fléchées ou la fonction bind pour lier le contexte de la fonction au composant React.

Fonction flèche :

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

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>

L'utilisation de l'une de ces méthodes de liaison garantit que la fonction a le contexte correct et peut accéder au this du composant React.

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!