React «не может читать свойство неопределенного» при использовании карты

Я делаю очень основное приложение React от teamtreehouse.com, и я постоянно сталкиваюсь

“TypeError: невозможно прочитать свойство” onPlayerScoreChange “неопределенного”

хотя я правильно привязываю свои функции (я думаю)

'onPlayerScoreChange' – это метод в компоненте Grandparent который выполняется, когда пользователь нажимает кнопку «+» или «-», чтобы изменить счет игрока.

Было бы очень полезно, если бы кто-то мог объяснить, что не так, потому что я думаю, что я устанавливаю this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) в конструкторе великого дедушки.

Родительский компонент:

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

(У компонента есть реквизиты по умолчанию для заголовка)

Детский компонент:

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

Компонент Grandchild:

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

Спасибо!

    Вы не сделали привязки для функции карты, где вы используете onScoreChange = {this.onPlayerScoreChange} ,

    вы можете использовать функции привязки или стрелки для привязки

    PS Связывание необходимо, потому что контекст функции карты отличается от контекста React Component, и поэтому внутри этой функции не будет ссылаться на React Components, поэтому вы не можете получить доступ к этим свойствам classа React Component.

    С функцией стрелки:

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

    С привязкой

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

    Также можно сделать, передав второй аргумент, поскольку это для функции map, поскольку событие onClick использует локальную функцию map, которая здесь не определена, и это в настоящее время относится к глобальному объекту.

     {this.state.initialPlayers.map(function(player, index) { return(  ) }),this} 
    Давайте будем гением компьютера.