So beheben Sie „TypeError: Eigenschaft von Undefiniert kann nicht gelesen werden' mit der Map-Funktion in React

Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in React mit Map-Funktion

In React-Anwendungen wird die Fehlermeldung „TypeError: Eigenschaft „onPlayerScoreChange“ von undefiniert kann nicht gelesen „ weist häufig auf ein Problem mit der Bindung bei Verwendung der Kartenfunktion hin. So lösen Sie dieses Problem:

Die Map-Funktion erstellt ein neues Array, indem sie ein vorhandenes Array durchläuft und für jedes Element eine Rückruffunktion aufruft. Innerhalb der Callback-Funktion bezieht sich dies auf den globalen Kontext, nicht auf den Kontext der React-Komponente. Ohne ordnungsgemäße Bindung führt der Zugriff auf Eigenschaften der React-Komponente aus der Callback-Funktion daher zum Fehler „undefiniert“.

Um dieses Problem zu beheben, können Sie entweder Pfeilfunktionen verwenden oder die Callback-Funktion an React binden Kontext der Komponente.

Mit Pfeilfunktionen:

Pfeilfunktionen erben den Kontext der umgebenden Funktion, sodass Sie einfach eine Pfeilfunktion für den Kartenrückruf verwenden können:

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

Mit Bind:

Alternativ können Sie die Map-Callback-Funktion manuell an den Kontext der React-Komponente binden:

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

Durch die Implementierung von beidem Bei diesen Methoden wird dieser Kontext korrekt gebunden, sodass Sie innerhalb der Map-Callback-Funktion auf die Eigenschaften der React-Komponente zugreifen und den „undefinierten“ Fehler vermeiden können.

Das obige ist der detaillierte Inhalt vonSo beheben Sie „TypeError: Eigenschaft von Undefiniert kann nicht gelesen werden' mit der Map-Funktion in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!