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中它表示状态在函数完成后更新，但我如何才能在{{1}之后调用diceSum()函数功能完成了吗？

Answer 1

setState接受第二个参数，一个函数，只有在设置了状态后才会调用它。所以你可以像这样使用相同的

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

   or

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

无法正确更新React状态变量

1 个答案: