Question

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

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

孙子组件：

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

您尚未对使用onScoreChange = {this.onPlayerScoreChange}，

的地图功能进行绑定

您可以使用绑定或箭头功能进行绑定

P.S。绑定是必需的，因为map函数的上下文与React Component上下文不同，因此此函数内的this不会引用React组件this，因此您可以＆＃39; t访问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))}

Answer 2

也可以通过将第二个参数传递给map函数来完成，因为onClick事件使用map函数的局部函数，这里的函数是未定义的，这个函数当前是指全局对象。

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

Answer 3

有时候这很容易，这完全取决于您声明循环的方式

例如，如果您尝试执行类似var.map（function（example，index）{}

但是如果您使用此

在地图中调用新函数

this.sate.articles.map(list => 
{<a onClick={() => this.myNewfunction()}>{list.title}</a>)}

第二个循环将使您摆脱未定义的错误

别忘了绑定新功能

Answer 4

//应在地图函数之前声明

const thObj = this;

this.sate.articles.map（list => { thObj.myNewfunction（）}> {list.title}）}

使用map时，React'无法读取undefined的属性'

4 个答案: