Unstart 구성 요소에 setState()를 사용하지 않고 다른 페이지로 이동하는 방법

Question

나는 앱과 같은 카운트 다운을 작성하여 반응하지만 모든 것이 제대로 작동하지만 누를 필요없이 다른 페이지로 이동하려고 할 때마다 문제가 발생합니다. 일시 중지, 오류가 발생합니다 '마운트 또는 마운트 구성 요소 만 업데이트 할 수 있습니다. 이는 대개 Unmount 구성 요소에서 setState()를 호출했음을 의미합니다.' 그것은 무엇을 의미하며 어떻게 해결할 수 있습니까? 대단히 감사드립니다.

import React from 'react'; 
import SubjectForm from './SubjectForm'; 
import {connect} from 'react-redux'; 
import {editSubject, removeSubject} from '../actions/subjectAction'; 

class StartPage extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={count:this.props.subject.hour*60*60+this.props.subject.minute*60, 
        name:'run', 
        alert:'' 
        };  
     this.timer = null; 
     this.stateChange=this.state.count 
     this.originTime = this.props.subject.hour*60*60+this.props.subject.minute*60; 
    } 

    setStateCountdown=(num)=>{ 
     this.setState({count:num}) 
    } 

    setStateAlert=(text)=>{ 
     this.setState({alert:text}) 
    } 

    setStateButtonChange=(text)=>{ 
     this.setState({name:text}) 
    } 

    begin=()=>{ 
     clearInterval(this.timer) 
     this.timer=setInterval(()=>{ 
      this.stateChange-- 
      this.setStateCountdown(this.stateChange) 
      let timeLeft=this.stateChange 

      if(this.stateChange<0){ 
       this.setStateAlert('done'); 
       clearInterval(this.timer); 
      return; 
     } 
      let hourleft = Math.floor(timeLeft/(60 * 60)); 
      let minuteleft = Math.floor((timeLeft % (60 * 60))/60); 
      let secondleft = timeLeft % 60; 
      this.setStateAlert(`you have ${hourleft} hour ${minuteleft} minute and ${secondleft} second until reaching your goal`); 


     },1000); 
    } 
    pause=()=>{ 
     clearInterval(this.timer) 
     console.log(this.state.count) 
     if(this.state.count<this.originTime){ 
      this.setStateButtonChange('resume') 
     } 
    } 

    reset=()=>{ 
     const pressConfirm = confirm('are you sure you want to reset?') 
     if(pressConfirm===true){ 
      console.log(this.state.count) 
      clearInterval(this.timer) 
      this.stateChange=this.originTime; 
      this.callbackFuncCountdown(this.stateChange) 
      this.callbackFunctionButtonChange('run') 
      this.callbackFunctionAlert('lets begin your study again') 
     } 
    } 

    render(){ 
     return(
      <div> 
      <SubjectForm subject={this.props.subject}/> 
      <button onClick = {this.begin}>{this.state.name}</button> 
      <button onClick = {this.pause}>pause</button> 
      <button onClick = {this.reset}>reset</button> 
      <h3>{this.state.alert}</h3> 
      </div> 
     ); 
    } 
}; 

const mapStateToProps = (state,props)=>{ 
    return{ 
     subject: state.subjects.find((subject)=>subject.id===props.match.params.id) 
    }; 
} 

export default connect(mapStateToProps)(StartPage); 

긴 코드를 유감스럽게 생각합니다. 사용 -

1 :

Answer 1

구성 요소를 마운트 해제 다른 페이지로 이동하지만, setInterval()의 기능은 여전히 ​​실행하고 마운트 해제 된 구성 요소의 상태를 업데이트하기 위해 노력하고있다, 당신은 당신이 당신의 응용 프로그램에 필요한 동작에 따라 2 가지 옵션이 있습니다 REDUX이/당신의 타이머 및 파견 행동/일시 정지를 시작하는 저장 위치가 어디

2 (당신이 이동하면 타이머가 계속됩니다) 을 중지 - 구성 요소의 componentWillUnmount() 방법 위해 clearInterval (재설정하거나 이동하면 타이머를 중지)