Wie bindet man Funktionen in React Map Iterationen richtig?

Bindungsfunktionen in React-Map-Iterationen

Problemstellung

Bei der Verwendung der Map-Funktion in React kann bei Entwicklern der Fehler „TypeError: Cannot“ auftreten Eigenschaft von undefiniert lesen.“ Dieser Fehler tritt auf, wenn eine bestimmte Methode, z. B. onPlayerScoreChange, innerhalb der Map-Funktion aufgerufen wird, aber nicht korrekt gebunden wurde.

Komponentenhierarchie verstehen

In der angegebenen React-Anwendung wird die Datenfluss und Komponentenhierarchie sind wie folgt strukturiert:

• Großelternkomponente:App interagiert mit der Enkelkomponente und verarbeitet die onPlayerScoreChange-Methode.
• Untergeordnete Komponente Komponente: Der Player empfängt Daten von der Großelternkomponente und gibt sie an die Enkelkomponente weiter.
• Enkelkindkomponente: Der Zähler verarbeitet Benutzereingaben und interagiert mit der Methode onPlayerScoreChange in der Großelternkomponente.

Bindungsfunktionen für Kartenfunktionen

Der Fehler tritt auf, weil die onPlayerScoreChange-Methode innerhalb der Kartenfunktion in der übergeordneten Komponente nicht korrekt gebunden ist. Die Bindung ist bei der Verwendung von Funktionen innerhalb von Karteniterationen von entscheidender Bedeutung, da sich der Kontext der Kartenfunktion vom Kontext der React-Komponente unterscheidet. Folglich verweist dies innerhalb der Map-Funktion nicht auf die React-Komponente, was zu Zugriffsproblemen auf deren Eigenschaften führt.

Es gibt zwei gängige Möglichkeiten, dieses Problem zu lösen:

Verwendung von Pfeilfunktionen

Pfeilfunktionen binden implizit den Kontext der Komponente. In diesem Fall würde der folgende Code den Fehler beheben:

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

Funktionsbindung explizit verwenden

Ein anderer Ansatz besteht darin, die Funktion explizit mithilfe der Bindungsmethode zu binden. Dies kann erreicht werden, indem der this-Kontext der Komponente als Argument an die Bindungsmethode übergeben wird:

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

Durch die Verwendung einer dieser Methoden zum Binden der onPlayerScoreChange-Methode innerhalb der Karteniteration sollte der Fehler behoben werden .

Das obige ist der detaillierte Inhalt vonWie bindet man Funktionen in React Map Iterationen richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!