ClearAlterval이 React Timer App에서 작동하지 않습니다.

Question

저는 Pomodoro 타이머 앱을 만들어 내 React 스킬을 향상시키기 위해 노력해 왔습니다.

startTimer() { 
    const { started } = this.state; 
    var timer; 
    if (!started) { 
     timer = setInterval(this.countdown, 1000); 
     this.setState({ started: true }); 
    } 
    else { 
     clearInterval(timer); 
     this.setState({ started: false }); 
    } 
    } 

없음 콘솔 오류 : 어떤 이유로 나는 clearInterval 작업을 얻을 수 없습니다. 조건문의 해당 부분이 확실히 실행되고 있는지 확인할 수 있습니다 (this.state.started에 로그 할 때 false이 표시됨). 타이머는 계속 똑딱 거리고 실제로 멈추지 않습니다. 코드의

나머지 :

import React, { Component } from 'react'; 

class Timer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     secs: 60, 
     started: false 
    }; 
    this.startTimer = this.startTimer.bind(this); 
    this.countdown = this.countdown.bind(this); 
    } 

    countdown() { 
    this.setState({ secs: this.state.secs - 1}); 
    } 

    startTimer() { 
    const { started } = this.state; 
    var timer; 
    if (!started) { 
     timer = setInterval(this.countdown, 1000); 
     this.setState({ started: true }); 
    } 
    else { 
     clearInterval(timer); 
     this.setState({ started: false }); 
    } 
    } 

    render() { 
    const { secs } = this.state; 
    console.log('secs:', secs) 
    console.log('started:', this.state.started); 
    return (
     <div className='timer' onClick={this.startTimer}> 
     <h2>Session</h2> 
     <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1> 
     </div> 
    ); 
    } 
} 

export default Timer; 

Answer 1

초기화 생성자 this.timer. 그런 다음 setInterval을 만들고이를 this.timer에 지정하면 나중에 지울 수 있습니다.

import React, { Component } from 'react'; 

class Timer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     secs: 60, 
     started: false 
    }; 
    this.timer = null; 
    this.startTimer = this.startTimer.bind(this); 
    this.countdown = this.countdown.bind(this); 
    } 

    countdown() { 
    this.setState({ secs: this.state.secs - 1}); 
    } 

    startTimer() { 
    const { started } = this.state; 
    if (!started) { 
     this.timer = setInterval(this.countdown, 1000); 
     this.setState({ started: true }); 
    } 
    else { 
     clearInterval(this.timer); 
     this.setState({ started: false }); 
    } 
    } 

    render() { 
    const { secs } = this.state; 
    console.log('secs:', secs) 
    console.log('started:', this.state.started); 
    return (
     <div className='timer' onClick={this.startTimer}> 
     <h2>Session</h2> 
     <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1> 
     </div> 
    ); 
    } 
} 

export default Timer;