Javascript ReactJS：单击按钮调用计时器函数

请注意：这不是的副本。那里的解决方案对我不起作用

这是我的初始状态：

我正在尝试在单击按钮时将this.state.game.status更改为“进行中”，一旦更改，我想启动计时器

渲染中的按钮：

startTimer函数

问题是，第一次单击按钮时不会更新this.state.game.status，因此不会启动计时器。我不得不点击按钮两次，整个事情才能正常进行，这是不明智的

注:

我上面提到的另一个问题有一个答案，但它指定我调用componentWillUpdate中的函数。它对我不起作用，因为它会在每次滴答声中调用startTimer，从而使计时器每次运行的速度都是原来的两倍

---

如何通过单击一个按钮来更新状态并调用计时器功能？我觉得这很简单，但我对ReactJS还不熟悉，所以我现在不知道怎么做。非常感谢。

对setState使用回调方法，因为改变状态需要一些时间，而且由于JS是异步的，因此，即使在状态改变之前，也会执行this.startTime，因此您需要第二次单击，这会做同样的事情，但此时状态已经改变，因此它可以工作

changeGameStatus = (status) => {
    console.log('status = ' + status)
    this.setState({
        game: {
            status: status
        }
    }, () => {
         console.log('new status:' + this.state.game.status)

    this.startTimer()
    })

}

---

这就是它的名字。。。回拨。我已经多次遇到该语法，但以前无法理解它。非常感谢你！这就解决了我的问题。是的，它被称为回调，当您在更新状态上执行异步操作时，您将需要它。是的，我已经这样做了。我不得不等15分钟才结束。这是一个多么奇怪的过程，你不觉得吗？直到现在我才知道这一点：也许他们这么做是因为有时在这段时间内会有更好的答案

<RaisedButton label="Start" primary={true}
    onClick={()=> this.changeGameStatus('in-progress')} />

changeGameStatus = (status) => {
    console.log('status = ' + status)
    this.setState({
        game: {
            status: status
        }
    })
    console.log('new status:' + this.state.game.status)

    this.startTimer()
}

startTimer() {
    if (this.state.game.status === 'in-progress') {
        console.log('The timer has started')
        this.timerID = setInterval(
          () => this.updateTimer(),
          1000
        )
    }
} /* END startTimer */

changeGameStatus = (status) => {
    console.log('status = ' + status)
    this.setState({
        game: {
            status: status
        }
    }, () => {
         console.log('new status:' + this.state.game.status)

    this.startTimer()
    })

}