我对React很陌生。我不明白为什么这个问题不起作用。
我有Numbers Component
。
const Numbers = (props) => {
return(
<div className="card text-center">
<div>
{Numbers.list.map((num,i) =>
<span key={i} onClick={() => props.selectNumbers(num)}>
{num}
</span>
)}
</div>
</div>
);
}
Numbers.list = [1,2,3,4,5,6,7,8,9];
现在在父
Game
组件中。class Game extends React.Component {
state = {
selectedNumbers : []
};
selectNumber = (clickedNumber) => {
if(this.state.selectedNumbers.indexOf(clickedNumber) >= 0) {return;}
this.setState(prevState => ({
selectedNumbers: prevState.selectedNumbers.concat(clickedNumber)
}));
};
render() {
const {selectedNumbers } = this.state;
return (
<div className="container">
<h3>
Play Nine
</h3>
<hr />
<div className="row">
<Answer selectedNums = {selectedNumbers} />
</div>
<br />
<Numbers selectNumbers={this.selectNumber} selectedNums = {selectedNumbers} />
</div>
);
}
}
现在,这个东西工作正常。但是当我做...
this.setState(prevState => ({
selectedNumbers: prevState.selectedNumbers.push(clickedNumber)
}));
该应用程序确实按预期工作。
As prevState.selectedNumbers is an array
应该不是push
而不是concat
吗?我究竟做错了什么?
最佳答案
使用push
时,您将selectedNumbers
设置为push操作的返回值,该值是根据mozilla developer docs的新数组的长度。推还尝试更改状态下的数组,正如PhilippSpo所说的那样,它不起作用。
像以前一样使用concat
或将selectedNumbers
复制到新数组,将值压入该数组,然后将selectedNumbers
设置为新数组。如果您使用的是ES6,则可以使用其他用户指出的散布运算符