Question

对于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**

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

但是我想存储该值并且为假。

有人可以解决吗？

Answer 1

查看以下沙箱：https://codesandbox.io/s/cool-paper-z8kpu。我复制粘贴了您的代码（除非我将框的初始值更改为“ U”），然后一切正常，即：

我点击带有“ U”的框-FIRST第一个为true，第二个为false
我点击另一个带有“ U”的框-发生同样的事情
我点击带有“ X”的框-FIRST日志为false，SECOND日志为
我点击带有“ O”的框-FIRST第一个为true，第二个为false

您需要记住，每个盒子都有自己的状态，它们都是相同的组件，这并不意味着它们具有共享的状态。

Answer 2

首先，在setState上使用async / await不是一个好主意，因为setState doesn't return a promise。如果要在更新xNextPlayer值之前等待新状态，则必须使用setState function的第二个参数，即回调函数（作为Promise）。

如果要在xNextPlayer中进行更新后检查新的setState，请从回调范围内的console.log取回它。

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

Answer 3

使用这种方法。我认为这是可行的。

const handleClick =（xNextPlayerStatus：boolean）=> {

    if(xNextPlayerStatus){
     this.setState({value: 'X'})
    }
    else if(!xNextPlayerStatus){
    this.setState({value: 'O'})

    }}     



        <button className="square" onClick={()=>handleClick(this.state.xNextPlayer)}>

Setstate在ReactJS中无法正常工作

3 个答案: