javascript - 无法正确更新 React 状态变量

Question

我正在使用我的第一个 React 应用程序(骰子应用程序)。当我调用函数来掷骰子时，我遇到了麻烦，因此随机为每个骰子提供必要的随机数。

这是我在 App 类中的构造函数和我想要在按下按钮时执行的两个函数。当我按下按钮功能rollTheDice()被执行并给出随机数，并且(某种程度上)用 this.setState({diceNumber: copyDiceNumber}); 更新状态然后当函数diceSum()时运行它会总结旧的状态日期。例如在第一个“掷骰子”功能 sum()将给出数字 2。

constructor() {
        super();
        this.state = {
            diceNumber: [1,1],
            total: 0,
        }
    }

    rollTheDice = () => {
        // console.log(this.state.diceNumber);

        console.log("Before roling" + this.state.diceNumber)

        let copyDiceNumber = this.state.diceNumber.slice();

        copyDiceNumber.map( (e,i) => {

            // console.log(e);

            copyDiceNumber[i] = Math.floor(Math.random() * (6 - 1) + 1)
        });

        this.setState({diceNumber: copyDiceNumber});

        this.diceSum();

        console.log("After roling" + this.state.diceNumber)

        // console.log(this.state.diceNumber);

    };

    diceSum = () => {
        let sum = 0;

        for (let i of this.state.diceNumber){
            sum = sum + i;
            console.log(sum);
        }
        this.setState({total: sum})
    };

我觉得这可能是因为 React 如何渲染状态，在文章 link 中它说状态在函数完成后更新，但我如何调用 diceSum()仅在rollTheDice()之后起作用功能完成了吗？

Answer 1

setState 采用第二个参数，即一个函数，仅在设置状态后调用该函数。所以你可以像这样在这里使用相同的

   ... 
   this.setState({diceNumber: copyDiceNumber}, this.diceSum);
   ...

   or

   ... 
   this.setState({diceNumber: copyDiceNumber}, () => this.diceSum());
   ...