使用地图时反应'无法读取未定义的属性'
我正在从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>
)}}
谢谢!
回答:
您尚未绑定要使用的map函数onScoreChange = {this.onPlayerScoreChange}
,
您可以使用绑定或箭头功能进行绑定
需要PS绑定,因为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}
/>
)
})}
{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))}
以上是 使用地图时反应'无法读取未定义的属性' 的全部内容, 来源链接: utcz.com/qa/398523.html