Setstate 在 ReactJS 中无法正常工作答案

【问题标题】：Setstate not working propertly in ReactJSSetstate 在 ReactJS 中无法正常工作
【发布时间】：2020-02-06 07:54:14
【问题描述】：

我对 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。它正确地执行此操作并且控制台记录为假。但是当我再次单击时，它再次设置回true。那么第一个控制台日志为真，第二个为假。

但我想存储值并为假。

有人有解决办法吗？

【问题讨论】：

标签： reactjs react-native setstate

【解决方案1】：

看看这个沙盒：https://codesandbox.io/s/cool-paper-z8kpu。我复制粘贴了您的代码（除了我将框的初始值更改为“U”）并且一切都按预期工作，那就是：

我单击带有“U”的框 - 第一个记录为真，第二个记录为假
我单击另一个带有“U”的框 - 发生同样的事情
我单击带有“X”的框 - 第一个记录为假，第二个记录为真
我单击带有“O”的框 - 第一个记录为真，第二个记录为假

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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)}>

【讨论】：