Warum kann ich die Eigenschaft „onPlayerScoreChange' nicht mit „map' in React lesen?

Enthüllung der Ursache des Fehlers „Eigenschaft kann nicht gelesen werden“ in React bei Verwendung von „map“

Beim Arbeiten mit React tritt der Fehler „ auf „TypeError: Eigenschaft „onPlayerScoreChange“ von undefiniert kann nicht gelesen werden“ kann frustrierend sein. Dies liegt typischerweise an einer unzureichenden Bindung der betreffenden Funktion.

Im bereitgestellten Code ist „onPlayerScoreChange“ eine Methode, die ausgeführt wird, wenn der Punktestand eines Spielers geändert wird. Diese Methode befindet sich in der Grandparent-Komponente. Eine Untersuchung zeigt jedoch ein Versehen bei der Bindung von „onPlayerScoreChange“ innerhalb der „map“-Funktion der übergeordneten Komponente.

Den „diesen“-Kontext verstehen

Um dieses Problem zu verstehen, Wir müssen uns mit dem „diesem“ Kontext innerhalb von JavaScript-Funktionen befassen. Wenn ein „this“-Ausdruck innerhalb einer gewöhnlichen Funktion (keine Pfeilfunktion) verwendet wird, hängt sein Wert davon ab, wie die Funktion aufgerufen wurde. Wenn also „this.onPlayerScoreChange“ innerhalb der „map“-Funktion ausgeführt wird, bezieht sich „this“ auf den Ausführungskontext der „map“-Funktion und nicht auf den Kontext der übergeordneten Komponente.

Lösung des Bindungsproblems

Um dieses Problem zu beheben, müssen wir sicherstellen, dass „onPlayerScoreChange“ an den Kontext der übergeordneten Komponente gebunden ist, sodass „this“ ordnungsgemäß auf die übergeordnete Komponente verweist. Dies kann auf zwei Arten erreicht werden:

Option 1: Pfeilfunktionen

Pfeilfunktionen erben ihren „diesen“ Kontext aus ihrem unmittelbaren lexikalischen Bereich, sodass keine expliziten Angaben erforderlich sind Bindung. Durch Ersetzen der regulären Funktion in der „Karte“ durch eine Pfeilfunktion zeigt der Kontext „dieser“ automatisch auf die übergeordnete Komponente:

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

Option 2: Bindungsmethode

Alternativ kann die reguläre Funktion mithilfe der Methode „bind“ an den Kontext der übergeordneten Komponente gebunden werden. Dieser Ansatz beinhaltet die explizite Angabe des Werts von „this“ beim Aufruf der Funktion:

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

Fazit

Durch die Implementierung der richtigen Funktionsbindung können Sie das Problem „ Fehler „Eigenschaft „onPlayerScoreChange“ von undefiniert“ kann in React nicht gelesen werden, wenn die Funktion „map“ verwendet wird.

Das obige ist der detaillierte Inhalt vonWarum kann ich die Eigenschaft „onPlayerScoreChange' nicht mit „map' in React lesen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!