ReactJS: eine Timer-Funktion auf die Schaltfläche Anruf klicken

Question

Bitte beachten Sie: Dies ist kein Duplikat ReactJS - Need to click twice to set State and run function. Die Lösung dort funktioniert nicht für mich.

Dies ist meine erste 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 */ 

Ich versuche this.state.game.status-in-progress auf die Schaltfläche klicken, um zu ändern, und wenn es geändert wird, ich möchte einen Timer starten.

Der Knopf innen render():

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

Die Funktion, die auf Tastenklick aufgerufen wird:

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

    this.startTimer() 
} 

Die startTimer() Funktion

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

Das Problem ist, this.state.game.status wird beim ersten Klicken auf die Schaltfläche nicht aktualisiert und daher startet der Timer nicht. Ich musste zweimal auf den Knopf klicken, damit das Ganze funktionierte, was nicht sehr ratsam ist.

HINWEIS:

Es gibt eine Antwort auf die andere Frage, die ich oben erwähnt, aber es gibt an, dass ich die Funktion innerhalb componentWillUpdate() nennen. Es funktioniert nicht für mich, weil es die startTimer() mit jedem Tick anruft, wodurch der Timer jedes Mal doppelt so schnell ausgeführt wird.

Wie kann ich meinen Status aktualisieren und die Timer-Funktion mit einem einzigen Klick aufrufen? Ich denke, das ist einfach, aber ich bin neu bei ReactJS, also habe ich keine Ahnung, wie ich es im Moment machen soll. Vielen Dank.

Answer 1

den Rückruf Ansatz verwenden für setState, da es einige Zeit dauert, den Staat zu mutieren und als JS async ist, wird this.startTime() ausgeführt, noch bevor der Zustand mutiert und somit müssen Sie den zweiten Klick, die die gleiche Sache tut, aber durch diese Zeit der Zustand ist bereits geändert und daher funktioniert es

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

    this.startTimer() 
    }) 

}