javascript - 使用 map 时 react 'cannot read property of undefined'

Question

我正在从 teamtreehouse.com 制作一个非常基本的 React 应用程序，并且我经常遇到

"TypeError: Cannot read property 'onPlayerScoreChange' of undefined"

即使我正确地绑定(bind)了我的函数(我认为)

'onPlayerScoreChange' 是 Grandparent 组件中的一个方法，当用户点击“+”或“-”按钮更改玩家得分时执行。

如果有人能解释出什么问题，那将非常有帮助，因为我想我在曾祖 parent 的构造函数中设置了 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>
    )
}}

(组件有标题的默认 Prop )

子组件:

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

孙组件:

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(
        <div className = "counter">
            <button className = "counter-action decrement" onClick = {this.handleDecrement}> - </button>
            <div className = "counter-score"> {this.props.score} </div>
            <button className = "counter-action increment" onClick = {this.handleIncrement}> + </button>
        </div>
)}}

谢谢!

Answer 1

你还没有为你正在使用的 map 函数完成绑定(bind) onScoreChange = {this.onPlayerScoreChange},

您可以使用绑定(bind)或箭头函数进行绑定(bind)

附言需要绑定(bind)，因为 map 函数的上下文不同于 React Component 上下文，因此此函数内的 this 不会引用 React Components this ，因此您无法访问 React Component 类的属性。

带箭头功能:

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

绑定(bind)

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