使用map时，React'无法读取undefined的属性' [英] React 'cannot read property of undefined' when using map

问题描述

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

I'm making a very basic React app from teamtreehouse.com, and I'm constantly encountering

TypeError：无法读取属性'onPlayerScoreChange'未定义

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

即使我正确绑定我的函数（我认为）

even though I'm binding my functions correctly (I think)

'onPlayerScoreChange'是祖父母组件中的一个方法，当用户点击时会执行该方法用于更改玩家得分的+或 - 按钮。

'onPlayerScoreChange' Is a method in the Grandparent component which executes when a user hits a '+' or '-' button to change a player's score.

如果有人可以解释错误，那将会非常有用，因为我认为我正在设置 this.onPlayerScoreChange = this.onPlayerScoreChange.bind（这个伟大的祖父母的构造函数中的。

It would be really helpful if someone could explain what is wrong, because I think I am setting this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) in the great grandparent's constructor.

父组件：

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

（组件有标题的默认道具）

(Component has default props for title)

子组件：

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

谢谢！

推荐答案

您还没有对使用的地图功能进行绑定onScoreChange = {this.onPlayerScoreChange} ，

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

you can either use bind or arrow functions for binding

PS需要绑定，因为map函数的上下文与React Component上下文不同，因此此函数中的此将不会引用React组件此因此您无法访问React Component类的属性。

P.S. Binding is needed because the context of the map function is different from the React Component context and hence this inside this function won't be Referring to the React Components this and thus you can't access that properties of the React Component class.

使用箭头功能：

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

这篇关于使用map时，React'无法读取undefined的属性'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！