ReactJS：

Question

をクリックし、ボタンの上にタイマー機能を呼び出し注意：これはReactJS - Need to click twice to set State and run functionの複製ではありません。そこの解決策は私のためには機能しません。

これが私の最初のstateです：私は、ボタンのクリックでin-progressにthis.state.game.statusを変更しようとしていますし、それが変更されると、私はタイマーを開始したい

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 */ 

。 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が最初のボタンクリックで更新されないため、タイマーが開始されないということです。私はすべてのことがうまくいくためにボタンを2回クリックしなければなりませんでした。それはお勧めできません。

注：

あり、私は上記の他の質問への答えはあるが、それは私がcomponentWillUpdate()内の関数を呼び出すことを指定します。これは私にとってうまくいかない。なぜなら、それは毎回ティックごとにstartTimer()を呼び出すため、毎回タイマーを2倍速く実行させるからだ。

私の状態を更新し、タイマー機能を1回のボタンクリックで呼び出すにはどうすればよいですか？私はこれが簡単だと思いますが、私はReactJSを初めて使っているので、現時点でどのようにしたらいいかわかりません。どうもありがとうございました。

Answer 1

setStateのコールバック手法は、状態の変更に時間がかかり、JSが非同期であるため、状態が変更される前でも実行されているため、同じことをするが、これによって状態が既に変更されているので、それが動作する時です。

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

    this.startTimer() 
    }) 

}