React状态变量无法正确更新：掷骰子应用开发问题求助

嘿，我完全懂你遇到的这个麻烦——这绝对是React新手最容易踩的坑之一，问题的核心在于**setState是异步执行的**！

为什么会出现这个问题？ #

当你调用this.setState({diceNumber: copyDiceNumber})时，React并不会立刻更新组件的状态值，而是把这个更新操作放到一个队列里，等当前代码执行栈清空后，再批量处理状态更新。所以你在setState之后马上调用diceSum()，此时this.state.diceNumber还是更新前的旧数据，求和自然就不对了。

两种可行的解决方案 #

方案1：利用setState的回调函数

setState支持第二个参数，这是一个回调函数，它会在状态更新完成、组件重新渲染后执行。把你的求和逻辑放在这个回调里，就能确保使用的是最新的状态：

rollTheDice() {
  // 生成新的骰子随机数数组
  const copyDiceNumber = this.state.diceNumber.map(() => Math.floor(Math.random() * 6) + 1);
  
  // 传递回调函数，在状态更新后执行求和
  this.setState({ diceNumber: copyDiceNumber }, () => {
    this.diceSum();
  });
}

方案2：使用函数式更新（更推荐）

如果你的diceSum是用来计算并更新另一个状态（比如总点数），那可以直接在setState的更新函数里完成计算。这个更新函数接收当前最新的状态作为参数，能确保你基于最新值进行操作：

rollTheDice() {
  this.setState(prevState => {
    // 基于旧状态生成新的骰子数
    const newDiceNumber = prevState.diceNumber.map(() => Math.floor(Math.random() * 6) + 1);
    // 直接计算新的总和
    const newSum = newDiceNumber.reduce((total, num) => total + num, 0);
    
    // 返回要更新的状态对象
    return {
      diceNumber: newDiceNumber,
      diceSum: newSum
    };
  });
}

这种方式避免了单独调用diceSum，还能保证状态更新的原子性，尤其适合多个状态依赖更新的场景。

我当初刚学React的时候也被这个异步更新坑过几次，搞清楚这个逻辑之后就顺畅多啦！

内容的提问来源于stack exchange，提问作者Austris