Reactjs 为什么不是'；我的第一次单击是否在React容器的状态中注册？

我正在开发一个匹配的游戏，并编写了一个handleClick函数，该函数应该增加一个名为guessCount的状态值，这样我就可以跟踪玩家每次猜测的情况。我还想将单击的每个项目的ID保存为处于状态的guessOne和guessTwo。由于某些原因，第一次单击不会触发我的setState guessCount增量代码，也不会捕获已单击项的ID。每次点击后都能正常工作，除了在用户实际点击后点击一次

state = {
  guessCount: 0,
  guessOne: null,
  guessTwo: null
}

handleClick = (e) => {
  this.setState({ guessCount: this.state.guessCount + 1 });

  if(this.state.guessCount === 1) {
    this.setState({ guessOne: e.currentTarget.dataset.id });
    this.setState({ guessCount: this.state.guessCount + 1 });
  }
  if(this.state.guessCount === 2) {
    this.setState({ guessTwo: e.currentTarget.dataset.id });
    this.setState({ guessCount: 0 });
  }
}

---

预期结果：第一次单击时，guessCount将从0增加到1，被单击项的ID将设置为guessOne状态。在第二次单击时，猜测计数将从1增加到2，被单击项目的ID将设置为状态guessTwo，然后猜测计数将重置为0。

setState

是异步的，您应该使用一个函数在应用更改时获取状态值

handleClick = (e) => {
   this.setState(state => ({ guessCount: state.guessCount + 1 }));

   if (this.state.guessCount === 1) {
     this.setState({ guessOne: e.currentTarget.dataset.id });
     this.setState(state => ({ guessCount: state.guessCount + 1 }));
   }

   if(this.state.guessCount === 2) {
      this.setState({ guessTwo: e.currentTarget.dataset.id });
      this.setState({ guessCount: 0 });
   }
}

顺便说一句，我认为您的代码可能有一些问题，假设函数

handleClick

被调用两次，而没有给

setState

更新组件状态的时间，我更喜欢下面的解决方案，在组件状态中存储键

gustisone

或

gustisttwo

constructor() {
   this.state = {
      guessKey: 'guessOne'
   };
}

handleClick = (e) => {
   this.setState(state => ({
      [state.guessKey]: e.currentTarget.dataset.id,
      guessKey: state.guessKey === 'guessOne' ? 'guessTwo' : 'guessOne'
   }));
}

---

由于react状态更新是异步的，因此不会立即更新。 不能保证在你打电话之后

this.setState({ guessCount: this.state.guessCount + 1 });

“guessCount”将立即设置为1。因此，当它达到条件时，“guessCount”可能保持为零

反应文档：

您可以将条件检查放在函数中，并将该函数作为回调传递，一旦状态更新，该回调将被调用

handleClick = (e) => {
    this.setState({ guessCount: this.state.guessCount + 1 },()=>{
         countUpdaterFunction();
    });
}

---

哦，这是有道理的。我想知道我是否应该将条件移动到componentDidUpdate函数中，这样我就不会在同一个onClick函数中调用setState两次了？我更新了我的解决方案，向您展示了一个不同的解决方案这为我解决了它！我把我的条件句放在一个单独的函数中，这就行了。谢谢