カウントダウンタイマーの設定場所

Question

リアクションのカウントダウンタイマーで作業し、どのように/ setTimeout機能を配置するかを理解していません。私が戻る前に、レンダリングに入れたときに動作するようですが、それは、ゼロから負の数にカウントを開始して状態のプロパティは、次に定義されていない。

更新

class App extends React.Component { 
constructor(props) { 
    super(props) 
    this.state = { 
     start: '', //'10:10:10' 
     end: '', 
     startSec: '', //'36610' 
     endSec: '' 
    } 
    this.clicked = this.clicked.bind(this); 
    this.handleTimeout = this.handleTimeout.bind(this); 
    } 

    handleTimeout() { 
    // decrement state.startSec 
    //^thought this would trigger re-render every sec when 
    //called in clicked() 

    } 

    clicked() { 
    let re=/^([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/; 
    let validStart = re.test(this.state.start); 
    let validEnd = re.test(this.state.end); 
    let start = this.state.start.split(":"); 
    let end = this.state.end.split(":"); 
    let startSec = (Number(start[0]) * 3600) + (Number(start[1]) * 60) + (Number(start[2])); 
    let endSec = (Number(end[0]) * 3600) + (Number(end[1]) * 60) + (Number(end[2])); 


    // validate inputs 
    if(!validStart || !validEnd) { alert('please use format HH:MM:SS') }  
    if(endSec > startSec) { 
     alert('Please make end time less than start time!'); 
    } 

    //where I am stuck 
    this.setState({ startSec: startSec }); 

    if(this.state.startSec > this.state.endSec) { 
     setInterval(this.handleTimeout() ,1000); 
    } 
    } 

    render() { 
    return (
     <div> 
     <h2> Timer </h2> 
     <div id="timer"> 
      Start Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({start: e.target.value})}} /><br /> 
      End Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({end: e.target.value})}}/> <br /><br /> 
      <button onClick={this.clicked}> Start Countdown </button><br /><br /> 
      <div id="output">{this.state.startSec}</div> 
     </div> 
     </div> 
    ); 
    } 
} 

：/私のような何かをして試してみましたhttps://jsfiddle.net/lydiademi/69z2wepo/91973/

私は、のために

感謝をCountdown timer in React

のようにタイマーに関連する記事を参照しますが、この問題に接続することができませんでしたしていますnyヘルプ..！

Answer 1

なぜなら、その関数を一度だけ呼び出すのは、setIntervalに関数を渡す必要があるからです。代わりに、関数を呼び出してその戻り値（未定義）を渡します。

ので、代わりの

setInterval(this.handleTimeout() ,1000); 

それはあなたが新しいもの を開始する前にそれらを停止することができますので、以前に開始間隔を追跡する必要が

setInterval(this.handleTimeout ,1000); 

• する必要があります

  if(this.currentInterval) { 
      clearInterval(this.currentInterval); 
  } 
  this.currentInterval = setInterval(this.handleTimeout, 1000);