Reagire ‘non può leggere la proprietà di indefinito’ quando si utilizza la mappa

Sto facendo un’app React molto semplice da teamtreehouse.com, e sono costantemente in contatto

“TypeError: imansible leggere la proprietà ‘onPlayerScoreChange’ di undefined”

anche se lego correttamente le mie funzioni (credo)

'onPlayerScoreChange' È un metodo nel componente Grandparent che viene eseguito quando un utente preme un pulsante ‘+’ o ‘-‘ per cambiare il punteggio di un giocatore.

Sarebbe molto utile se qualcuno potesse spiegare cosa è sbagliato, perché penso che sto impostando this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) nel costruttore del bisnonno.

Componente genitore:

 class App extends React.Component { constructor(props) { super(props); this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) this.state = { initialPlayers: props.initialPlayers, }; } onPlayerScoreChange(delta, index) { this.setState((prevState, props) => { return {initialPlayers: this.prevState.initialPlayers[index].score += delta} }) } render() { return( 
{this.state.initialPlayers.map(function(player, index) { return( ) })}
) }}

(Il componente ha oggetti di scena predefiniti per il titolo)

Componente figlio:

 class Player extends React.Component { render() { return( 
{this.props.name}
) }}

Componente Nipote:

 class Counter extends React.Component { constructor(props) { super(props) this.handleDecrement = this.handleDecrement.bind(this) this.handleIncrement = this.handleIncrement.bind(this) } handleDecrement() { this.props.onChange(-1, this.props.index) } handleIncrement() { this.props.onChange(1, this.props.index) } render() { return( 
{this.props.score}
)}}

Grazie!

Non hai eseguito il binding per la funzione map in cui stai utilizzando onScoreChange = {this.onPlayerScoreChange} ,

puoi utilizzare le funzioni bind o arrow per il binding

PS Binding è necessario perché il contesto della funzione map è diverso dal contesto React Component e quindi this funzione non si riferirà ai componenti React e quindi non sarà ansible accedere alle proprietà della class Componente React.

Con la funzione Freccia:

  {this.state.initialPlayers.map((player, index)=> { return(  ) })} 

Con il bind

  {this.state.initialPlayers.map(function(player, index) { return(  ) }.bind(this))} 

Può anche essere fatto passando il secondo argomento come questo per mappare la funzione poiché l’evento onClick utilizza localmente questa funzione della mappa che non è definita qui e che attualmente si riferisce all’object globale.

 {this.state.initialPlayers.map(function(player, index) { return(  ) }),this}