Как перейти на другую страницу без setState() при ошибке компонента Unmount в реакции

Question

Я изучаю React, написав приложение, похожее на обратный отсчет, все работает нормально, но у меня возникает проблема: всякий раз, когда я пытаюсь перейти на другую страницу без нажатия кнопки "пауза", я получаю сообщение об ошибке "могу обновить только компонент монтирования или монтирования, обычно это означает, что вы вызывается setState() для компонента Unmount.' что это значит и как я могу это исправить? заранее большое спасибо.

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);

Я прошу прощения за длинный код.

Answer 1

Переход на другую страницу размонтирует ваш компонент, но функция в setInterval() все еще работает и пытается обновить состояние несмонтированного компонента, у вас есть 2 варианта в зависимости от поведения, которое вам нужно для вашего приложения:

1 - Используйте приставку для сохранения вашего таймера и отправки действий, чтобы начать / приостановить / остановить его в любом месте (таймер продолжит работу, если вы перемещаетесь)

2 - clearInterval в componentWillUnmount() метод вашего компонента (сброс или остановка таймера при навигации)