Question

请注意：这不是 ReactJS - Need to click twice to set State and run function 的重复。那里的解决方案对我不起作用。

这是我最初的state：

constructor(props) {
    super(props)
    this.state = {
        /* some code */
        game: { // game-level
            /* some code */
            /* value options: 'ready' 'in-progress', 'paused', 'cleared' */
            status: 'ready'
        },
    } /* END state */
} /* END constructor */

我尝试在按钮点击时将this.state.game.status更改为in-progress，一旦更改，我想启动计时器。

render()内的按钮：

<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()功能

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

问题是，第一次按键单击时this.state.game.status未更新，因此无法启动计时器。我不得不点击两次按钮才能完成所有工作，这是不可取的。

注意：

我上面提到的另一个问题有一个答案，但它指定我在componentWillUpdate()内调用该函数。它对我不起作用，因为它会在每次打勾时调用startTimer()，从而使计时器每次都运行两倍。

如何通过单击按钮更新我的状态并调用定时器功能？我觉得这很简单，但我是ReactJS的新手，所以我现在不知道该怎么做。非常感谢你。

Answer 1

对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()
    })

}

ReactJS：点击按钮调用计时器功能

1 个答案: