反応中のカウントダウンタイマー

Question

componentWillReceiveProps(nextProps) { 
     if (nextProps.seconds !== 0) { 
      this.setState({ seconds: nextProps.seconds }); 
      setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000); 
     } 
    } 

私はこの反応を反応させてストップウォッチを作りました。

したがって、1秒ごとにメソッドgetStopTimerを呼び出し、1つずつ減らしてから{this.state.seconds}を使用してブラウザに表示します。

私はこれに新しいので、私は反応のライフサイクルフックについて単なる考えを持っています。

カウントダウンタイマーは最初の入力で動作していますが、再ロードせずにもう一度開始すると、前回の2倍の時間でタイマーが動作しています。最初の走行と同じように、ストップウォッチは1秒タイマーだったが、次の入力は2秒間同じであった。

これがなぜ起こっているのか説明してください。

getStopTimer(seconds) { 
     console.log(seconds); 
     if (seconds >= 0) { 
      this.setState({ seconds }); 
     } 
    } 

ここにはストップウォッチの子コンポーネントがあります。

import React, { Component } from 'react'; 

class Stopwatch extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      hour: 0, 
      minute: 0, 
      second: 0, 
      seconds: 0 
     }; 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.seconds !== 0) { 
      this.setState({ seconds: nextProps.seconds }); 
      setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000); 
     } 
    } 

    componentWillUnmount() {} 

    getStopTimer(seconds) { 
     console.log(seconds); 
     if (seconds >= 0) { 
      this.setState({ seconds }); 
     } 
    } 

    render() { 
     return (
      <div> 
       <p>{this.state.seconds} seconds remains!</p> 
      </div> 
     ); 
    } 
} 

export default Stopwatch; 

Answer 1

設定したタイマーをクリアする必要があります。また、プロンプトを変更するたびにステップごとに余分な秒数を追加して実行し続けます。

import React, { Component } from 'react'; 

class Stopwatch extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      hour: 0, 
      minute: 0, 
      second: 0, 
      seconds: 0, 
      intervalID: undefined 
     }; 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.seconds !== 0) { 
      if (this.state.intervalID) { 
       clearInterval(this.state.intervalID); 
      } 
      // this.setState({ seconds: nextProps.seconds }); 
      // this.setState({ intervalID: setInterval(() => this.getStopTimer(this.state.seconds - 1), 1000)}); 
      // a better alternative to the 2 lines above 
      this.setState({ 
       seconds: nextProps.seconds, 
       intervalID: setInterval(() => this.getStopTimer(nextProps.seconds - 1), 1000) 
      }); 
     } 
    } 

    componentWillUnmount() { 
     if (this.state.intervalID) { 
      clearInterval(this.state.intervalID); 
     } 
    } 
    ... rest of your code ...