关于 .setState() 中的 prevState 回调

Question

Case1.

handleRemovePlayer = id => {
this.setState(prevState => {
return {
players: prevState.players.filter(player => player.id !== id)
};
});
};

案例2.

// Arrow Func: become Component instance
incrementScore = () => {
this.setState(prevState => ({
score: this.state.score + 1
}));
};
decrementScore = () => {
if (this.state.score > 0) {
this.setState(prevState => ({
score: this.state.score - 1
}));
}
};

在 setState(( 中，为什么 case1 不能使用this.players.filter而不是prevState.player？case1 和 2 都使用相同的prevState回调。谁能准确地解释一下前置状态？ 提前感谢！

Answer 1

目前，setState()在事件处理程序中是异步的。

假设 - 您更新了状态，并且想要检查状态是否已更新。

为此，您可以使用更新程序(回调(作为第二个参数来检查更新的状态。

喜欢这个-

incrementScore = () => {
this.setState(prevState => ({
score: prevState.score + 1
}),()=>{
console.log(this.state.score)
});
};

对setState的调用是异步的 - 不要依赖this.state在调用setState后立即反映新值。如果您需要根据当前状态计算值，请传递更新程序函数而不是对象......对于您的引用集在 reactjs 中的状态

Answer 2

SetState 是一个异步方法。因此，如果有超过 1 个 setState 执行方法，则第二种方法可能会产生我们不感兴趣的值。但第一种方法将确保我们始终获得最新的状态值。

应该始终使用prevState而不是this.state.