Wie kann der Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in React behoben werden?

Fehler „Eigenschaft von Undefiniert kann nicht gelesen werden“ in React When Using Map

Problem:

Benutzer stoßen auf den „TypeError : Die Eigenschaft „onPlayerScoreChange“ des undefinierten Fehlers „Kann nicht gelesen werden“ in React-Apps trotz scheinbar korrekter Funktionsbindung.

Antwort:

Das Problem liegt in der Verwendung der Karte, wenn Übergeben einer Funktion als Eigenschaft. Ohne die Funktion innerhalb der Karte zu binden, ändert sich der Kontext dieser Änderungen und die Eigenschaften der React-Komponente werden unzugänglich.

Bindungsoptionen:

Um dieses Problem zu beheben, kann man beides verwenden Pfeilfunktionen oder die Bindefunktion, um den Kontext der Funktion an die React-Komponente zu binden.

Pfeilfunktion:

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

Durch die Verwendung einer dieser Bindungsmethoden wird sichergestellt, dass die Funktion den richtigen Kontext hat und auf diesen der React-Komponente zugreifen kann.

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