반응에서 카운트 다운 타이머

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 ...