Очистить интервал не работает в моем компоненте JavaScript? - PullRequest
Новая
       104

Очистить интервал не работает в моем компоненте JavaScript?

0 голосов
/ 26 сентября 2019

У меня есть компонент, который начнет обратный отсчет с 5 минут при получении метки времени (obsTakenTime) через реквизит.Когда обратный отсчет становится <= 0, я отображаю «Просрочено».На данный момент мне нужно очистить интервал, который я думаю, что я сделал, проблемы в том, что если, если я обновляю страницу, obstimeleft должен остаться просроченным, но обратный отсчет автоматически начинается с 59 минут, потому что значение <code>nextObservationTime становится 59 минут и this.state.obsTimeleft becomes undefined даже думал, что значение отметки времени obsTakenTime одинаково.Я смотрел на другие подобные темы на SO, но я не мог заставить мою работать.Любая помощь приветствуется.

аналогичный пост - Очистить интервал в классе React 

Countdown component

export default class ObservationCountDown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            obsTimeleft: undefined
        };

        this.countDown = this.countDown.bind(this);
        this.startCounter = this.startCounter.bind(this);
        this.countDownInterval = null;
    }

    countDown() {

        const { obsTakenTime} = this.props; //when last obs was taken by the user in ms      
        const nextDueTimeForObs = moment(obsTakenTime).add(5, 'minutes');       
        const nextObservationTime = Number(nextDueTimeForObs.subtract(moment.now()).format('m'));

        const timeToDisable = 2; // disable buttons time 

        this.setState({ obsTimeleft: nextObservationTime + ' min' }, () => {

            if (nextObservationTime <= Number(timeToDisable)) {
                this.props.disablePatientUpdate();
            }
            if (nextObservationTime <= 0) {
                clearInterval(this.countDownInterval); //  doesn't work here

                this.setState({ obsTimeleft: 'Overdue' }, () =>  {
                    if(this.state.obsTimeleft === 'Overdue'){
                        clearInterval(this.countDownInterval); // doesn't work here
                    } 
                });


            }

        });

    }

 componentDidMount() {
        this.startCounter();
    }

 startCounter() {
        this.countDownInterval = setInterval(this.countDown, 1000);
    } 

  componentDidUpdate(prevProps){
        if(this.props.patient.timestamp !== prevProps.patient.timestamp){
            this.startCountdown();
        }
    }
   componentWillUnmount(){
        clearInterval(this.countDownInterval);
    }

    render() {
        const { obsTimeleft } = this.state;

        return (
            <>
                {(obsTimeleft && obsTimeleft === 'Overdue') ?
                    <div className="text-danger">
                        <strong>{obsTimeleft}</strong>
                    </div> :
                    <div>
                        <strong>{.obsTimeleft}</strong>
                    </div>} 
            </>
        );

    }
}


another version of countDown() that I tried and didn't work 

countDown() {
    const { obsTakenTime } = this.props; // obs duration - when last obs was taken by the user in min       
        const nextDueTimeForObs = moment(obsTakenTime).add(2, 'minutes'); 

        const nextObservationTime = Number(nextDueTimeForObs.subtract(moment.now()).format('m'));
        console.log('nextObservationTime', nextObservationTime);

        this.setState({ obsTimeleft: nextObservationTime + ' min' }) 
            if (nextObservationTime <= 0) {
                this.setState({ obsTimeleft: 'Overdue' }, () => {
                    if(this.state.obsTimeleft === 'Overdue') {
                        clearInterval(this.countDownInterval); 

                    }
                });
                this.props.enablePatientUpdate();
                this.props.resetPatient(patient);
            }


    }
...