有人可以解释这个状态更新是如何解决的吗？

Question

嗨，我一直在学习 ReactJs，我写了这些行：

  handlerClick(i) {
    this.setState(
      (state) => (state.squares = [...state.squares, (state.squares[i] = "X")])
    );
  }

现在，我知道发生了什么，但我对它的工作原理、每个操作的执行顺序感到困惑...

Answer 1

关于运算顺序，赋值运算符右侧的所有内容都在赋值发生之前求值，因此在 = 右侧的表达式中每次使用 state，参考在任何赋值发生之前到 state。

关于 setState 的正确使用，你不应该分配给你的旧状态，而是 return 一个全新的对象：

handlerClick(i) {
  this.setState((state) => {
    const squares = [...state.squares];
    squares[i] = "X";
    return {...state, squares };
  });
}

或者，等价地：

handlerClick(i) {
  const squares = [...this.state.squares];
  squares[i] = "X";
  this.setState({...this.state, squares});
}

Can someone explain how this state update is resolved?