我正在重新审视一个我问过的老问题并以不同的方式处理它。目前我想更新个人得分数组。目前发生的事情是onClick函数运行时它会删除所有整个数组。我如何更新我试图指定的数组的索引???
class App extends React.Component {
constructor(props) {
super(props);
this.scoreFive = this.scoreFive.bind(this);
this.state = {
score: [10, 20]
}
}
scoreFive(key) {
this.setState((prevState) => {
return {
score: [
prevState.score[key] + 5
]
}
})
console.log(key)
}
render() {
return (
<div>
<h1>Dominoes</h1>
<Player key={1} name="micah" score={this.state.score[0]} scoreFive={() => this.scoreFive(0)} />
<Player key={2} name="kyndra" score={this.state.score[1]} scoreFive={() => this.scoreFive(1)} />
</div>
);
}
}
const newArray = this.state.score.map(element => element + 5);
然后做:
this.setState({score: newArray});
map函数使用您的条件返回一个新数组。
有任何问题让我知道:)
您必须从先前的状态获取数组,克隆它,修改某个索引,然后使用以下更新状态:
score: prevState.score.map((value, index) => index === key ? value + 5 : value)
如果你经常这样做它是非常重复的,你也可以把它抽象成一个帮手:
const lens = (key, cb) => obj => ({ ...obj, [key]: cb(obj[key]) });
const index = (index, cb) => array => array.map((v, i) => i === index ? cb(v) : v);
适用于:
this.setState(lens("score", index(key, it => it + 5)));
尝试:
scoreFive(index) {
this.setState((prevState) => {
const score = prevState.score; // reference the array
score[index] + 5; // modify the specific index
return {
score: score
};
})
console.log(key)
}
更新分数并设置状态..
scoreFive(key) {
let {score} = this.state;
score[key] += 5;
this.setState({score});
}
编辑----------------------
因此,经过研究和一些负面标记,我发现我做错了,并改变了the-power-of-not-mutating-data中提到的状态
所以这是更新的实现
scoreFive(key) {
this.setState({score: this.state.score.map((data, index) => index === key ? data + 5 : data) });
}
谢谢你的协助 :)