React中使用扩展运算符更新状态异常：每次点击仅添加一个元素求助

嘿，我来帮你搞定这个问题！你遇到的核心问题是React的setState是异步操作，这导致你的循环里每次调用setState时，拿到的this.state.sequence其实都是循环开始时的旧状态，而不是更新后的最新状态。

举个例子：假设初始sequence是空数组，第一次循环添加数字3，调用setState后，React并不会立刻更新this.state；第二次循环还是拿到空数组，添加另一个数字，这时候的setState会覆盖第一次的操作；直到循环结束，最后一次的setState生效，所以你看到每次点击只新增了一个数字。

修复方案：使用函数式setState #

当你需要基于前一次的state来更新新状态时，一定要用函数式的setState，它会接收prevState（最新的状态）作为参数，这样每次更新都能基于最新的数组来添加元素。修改后的代码如下：

getSequence = () => {
  let n = 0;
  while (n < 3) {
    let number = Math.floor(Math.random() * 10) + 1;
    let exists = this.state.sequence.indexOf(number);
    if (exists < 0) {
      // 使用函数式setState，基于prevState更新
      this.setState(prevState => ({
        sequence: [...prevState.sequence, number]
      }));
      n++;
    }
  }
}

补充说明 #

函数式setState是React官方推荐的方式，尤其是在多次连续更新、或者依赖前一次state的场景下，它能确保你拿到的是最新的状态值，避免异步更新带来的状态不一致问题。

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