Question

这是我的模特：

class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      squares: Array(3).fill(Array(3).fill(null)),
      xIsNext: true
    };
  }

  get turn() {
    return this.state.xIsNext ? 'X' : 'O';
  }

  handleTurn(x, y) {
    const squares = this.state.squares.slice().map(function(row) {
      return row.slice();
    });

    const turn = this.turn; // this returns either "X" or "Y"
    squares[x][y] = turn; // this is the value I'm going to be accessing later on
    this.setState({
      squares: squares
    });

    if (this.isSolved(x, y)) {
      console.log('VICTORY!')
    }
    this.nextPlayer();
  }
  isSolved(x, y) {
    var count = 0
    var player = this.state.squares[x][y]; // here is when I try to access the value set at at 'handleTurn')
    // more stuff down there
    return false;
}

我的问题是这样的：isSolved来自handleTurn，而handleTurn我会设置一个从二维到'X'或'的坐标Y';但是当我在isSolved中检查该值时，我总是得到之前的值，而不是我刚设置的值。

例如，第一次通话时会收到null（当我希望X时），第二次通话时我会得到X（当我期待{{1}时然后），等等。

Answer 1

在React setState works (mostly) asynchronously中，以便能够在一次传递中批量处理多项更改。

这意味着，当您this.setState handleTurn时，状态实际上尚未更改。

您可以传递setState第二个参数，这是一个在实际更改状态时要执行的回调函数。

这是一篇有趣的文章，更深入地探讨了setState的行为：https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm

在状态中访问最近设置的属性将返回旧值

1 个答案: