Wie behebe ich den Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in der Kartenfunktion von React?

Den Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in der Map-Funktion von React verstehen

In der React-Entwicklung tritt häufig der Fehler „TypeError“ auf : Die Eigenschaft „onPlayerScoreChange“ von „undefiniert“ kann bei Verwendung der Kartenfunktion nicht gelesen werden. Dieses Problem tritt typischerweise aufgrund eines fehlerhaften Bindungsprozesses der Kartenfunktion auf.

Kontext

Im bereitgestellten Code haben wir eine hierarchische Komponentenstruktur mit den folgenden Komponenten:

• Übergeordnetes Element: App
• Untergeordnetes Element: Spieler
• Enkelkind: Zähler

Die Methode „onPlayerScoreChange“ ist in der App-Komponente definiert und soll den Punktestand eines Spielers basierend auf Benutzereingaben aktualisieren.

Das Problem

Der Fehler tritt in der Kartenfunktion der „App“-Komponente auf, wo die „ Die Requisite „onScoreChange“ wird der Methode „onPlayerScoreChange“ der App-Komponente zugewiesen:

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

Der Kontext der Kartenfunktion unterscheidet sich jedoch vom Kontext der React-Komponente. Daher bezieht sich „this“ innerhalb der Funktion auf etwas anderes als die App-Komponente, wodurch „this.onPlayerScoreChange“ undefiniert wird.

Die Lösung

Um dieses Problem zu beheben Bei diesem Problem müssen wir die Kartenfunktion an den Kontext der App-Komponente binden. Dies kann entweder durch die Verwendung von Pfeilfunktionen (Lambda) oder der Bindungsmethode erreicht werden.

Pfeilfunktionen verwenden

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

Pfeilfunktionen binden automatisch den „this“-Wert an den umgebenden Bereich, sodass keine explizite Bindung erforderlich ist.

Verwendung der Bind-Methode

{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))}

Die Bind-Methode bindet die Kartenfunktion explizit an den Kontext der App-Komponente .

Das obige ist der detaillierte Inhalt vonWie behebe ich den Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in der Kartenfunktion von React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!