Setstate在ReactJS中无法正常工作

我对ReactJS比较陌生，我对setState有一些问题

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './index.js';

class Square extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: null,
        xNextPlayer: true
      };
    }

    render() {
      return (
        <button
          className="square"
          onClick={ async () => {
              console.log(this.state.xNextPlayer);
              if(this.state.xNextPlayer === true) {
                this.setState({value: 'X'});
              } else {
                this.setState({value: 'O'});
              }
              await this.setState({xNextPlayer: !this.state.xNextPlayer});
              console.log(this.state.xNextPlayer);
          }}
        >
          {this.state.value}
        </button>
      );
    }
  }

  class Board extends React.Component {
    renderSquare(i) {
      return <Square />;
    }

    render() {
      const status = 'Next player: X';

      return (
        <div>
          <div className="status">{status}</div>
          <div className="board-row">
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          </div>
          <div className="board-row">
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
          </div>
          <div className="board-row">
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
          </div>
        </div>
      );
    }
  }

  class Game extends React.Component {
    render() {
      return (
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
    }
  }

  // ========================================

  ReactDOM.render(
    <Game />,
    document.getElementById('root')
  );
  **strong text**

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
导入“./index.js”；
类Square扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：null，
xNextPlayer：正确
};
}
render（）{
返回(
{
console.log（this.state.xNextPlayer）；
if（this.state.xNextPlayer===true）{
this.setState（{value:'X'}）；
}否则{
this.setState（{value:'O'}）；
}
等待this.setState（{xNextPlayer:！this.state.xNextPlayer}）；
console.log（this.state.xNextPlayer）；
}}
>
{this.state.value}
);
}
}
类板扩展React.Component{
renderSquare（一）{
返回；
}
render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
);
}
}
类游戏扩展了React.Component{
render（）{
返回(
{/*状态*/}
{/*TODO*/}
);
}
}
// ========================================
ReactDOM.render(
,
document.getElementById（'root'））
);
**强文本**

现在的问题是XnextLayer没有正确更新。 当我第一次单击时，xNextPlayer是正确的。然后我想把它设为false。它正确地执行此操作，并且console日志为false。但当我再次单击时，它又被设置为true。第一个控制台日志为true，第二个为false

但是我想存储值，并且为false

---

有人有解决方案吗？

首先，在

设置状态上使用async/await不是一个好主意，因为。如果要在更新
xNextPlayer
值之前等待新状态，则必须使用的第2个参数是回调函数（作为承诺）

如果要在
设置状态
中更新新的
xNextPlayer
后检查它，请从回调范围中的
控制台.log
获取它

this.setState({ xNextPlayer: !this.state.xNextPlayer }, () => { console.log(this.state.xNextPlayer) })`

首先，在
setState
上使用async/await不是一个好主意，因为。如果要在更新
xNextPlayer
值之前等待新状态，则必须使用的第2个参数是回调函数（作为承诺）

如果要在
设置状态
中更新新的
xNextPlayer
后检查它，请从回调范围中的
控制台.log
获取它

this.setState({ xNextPlayer: !this.state.xNextPlayer }, () => { console.log(this.state.xNextPlayer) })`

看看这个沙盒：。我复制粘贴了您的代码（除了我将框的初始值更改为“U”）并且一切正常，即：

我点击一个带有“U”的框——第一个日志为真，第二个日志为假
我点击另一个带有“U”的框——同样的事情也会发生
我点击一个带有“X”的框——第一个日志为假，第二个日志为真
我点击一个带有“O”的框——第一个日志为真，第二个日志为假
您需要记住，每个框都有自己的状态，它们都是相同的组件并不意味着它们有一个共享状态。
看看这个沙盒：。我复制粘贴了您的代码（除了我将框的初始值更改为“U”）并且一切正常，即：

我点击一个带有“U”的框——第一个日志为真，第二个日志为假
我点击另一个带有“U”的框——同样的事情也会发生
我点击一个带有“X”的框——第一个日志为假，第二个日志为真
我点击一个带有“O”的框——第一个日志为真，第二个日志为假
您需要记住，每个框都有自己的状态，它们都是相同的组件并不意味着它们有一个共享状态。
使用这种方法。我认为这是可行的

const handleClick=（xNextPlayerStatus:boolean）=>{

if（xNextPlayerStatus）{
this.setState（{value:'X'}）
}
如果（！xNextPlayerStatus）为else，则为{
this.setState（{value:'O'}）
}}     
handleClick（this.state.xNextPlayer）}>
使用这种方法。我想它会有用的

const handleClick=（xNextPlayerStatus:boolean）=>{

if（xNextPlayerStatus）{
this.setState（{value:'X'}）
}
如果（！xNextPlayerStatus）为else，则为{
this.setState（{value:'O'}）
}}     
handleClick（this.state.xNextPlayer）}>