ComponentWillUnmount()不清除间隔

时间:2019-06-20 18:59:33

标签: javascript reactjs

我有一个倒数计时器,当它变为0时应该调用一个方法。然后,呈现一个新页面,倒数应该重置并重新开始。它会按预期工作,直到卸下组件。然后每秒就会调用一次timeNext()方法,因为该间隔不再停止了。

import React, { Component } from 'react';

class Countdown extends Component {

    state = {
        timer: this.props.timer
    }

    decrementTimeRemaining = () => {
        if (this.state.timer > 0) {
            this.setState({
                timer: this.state.timer - 1
            });
        } else {
            clearInterval(this.timerFunction);

            this.props.timeNext();
            this.setState({ timer: this.props.timer });
            this.decrement();
        }
    };

    decrement() {
        this.timerFunction = setInterval(() => {
            this.decrementTimeRemaining();
        }, 1000);
    }

    componentDidMount() {
        this.decrement()
    }

    componentWillUnmount() {
        console.log("unmounted")
        clearInterval(this.timerFunction);
    }

    render() {
        return (
            <div>{this.state.timer} </div>
        )
    }
}

export default Countdown;

我怀疑它会导致无限循环。我认为清除componentWillUnmount()中的间隔会起作用,但是显然有一个错误。甚至在卸载组件并且我不知道如何停止它的情况下,似乎也会有一个间隔运行。

1 个答案:

答案 0 :(得分:1)

我认为您的decrementTimeRemaining函数过于复杂。我会像这样重构函数:

decrementTimeRemaining = () => {
    if (this.state.timer > 0) {
        this.setState({
            timer: this.state.timer - 1
        });
    } else {
        this.setState({ timer: this.props.timer });
    }
};

现在,componentWillUnmount是唯一调用clearInterval的位置,而componentDidMount是唯一启动间隔的位置。