Hi I've been learning ReactJs and I wrote these lines:

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

Now, I know whats happening but I'm confused with how this is working, the order that each operation is being executed...

CodePudding user response：

Regarding the order of operations, everything to the right of an assignment operator is evaluated before the assignment takes place, so every usage of state in the expression to the right of =, refers to state before any assignment occurs.

Regarding proper usage of setState, you shouldn't assign to your old state, but rather return an entirely new object:

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

Or, equivalently:

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