倒計時計時器

Question

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

我有這段代碼在reactjs中製作秒錶。

因此，在每一秒鐘它調用一個方法getStopTimer並減少第二個，然後使用{this.state.seconds}在瀏覽器中顯示。

我對生命週期鉤子只有一個簡單的想法，因爲我對此很陌生。

倒計時器正在對我的第一個輸入進行處理，但是當我再次給它開始時沒有重新加載時，定時器運行的時間是前一次的兩倍。就像第一次運行一樣，秒錶用於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 ...