关于 .setState() 中的 prevState 回调

Question

案例1.

    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 回调。任何人都可以准确解释 prevState 吗？提前致谢！

Answer 1

SetState 是一个异步方法。所以，如果有多个 setState 执行方法，第二种方法可能会得到我们不感兴趣的值。但是第一种方法将确保我们始终获得最新的状态值。

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

Answer 2

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

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

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

像这样-

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

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

关于 .setState() 中的 prevState 回调

Regarding prevState callback in .setState()

javascript

setstate

reactjs