使用map时，Reaction‘无法读取未定义的属性’

Question

我正在做一个很基本的应用程序，我经常会遇到

“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(
        <div className = "scoreboard">
            <Header title = {this.props.title}/>
            <div className = "players">
                {this.state.initialPlayers.map(function(player, index) {
                    return(
                        <Player 
                        name = {player.name} 
                        score = {player.score} 
                        key = {player.id} 
                        index = {index}
                        onScoreChange = {this.onPlayerScoreChange}
                        />
                    )
                })}
            </div>
        </div>
    )}}

(组件具有默认标题支持)

儿童部分：

class Player extends React.Component {render() {
    return(
        <div className = "player">
            <div className = "player-name">
                {this.props.name}
            </div>
            <div className = "player-score">
                <Counter score = {this.props.score} onChange = {this.props.onScoreChange} index = {this.props.index}/>
            </div>
        </div>)}}