javascript - ComponentWillUnmount() 不清除间隔

Question

我有一个倒计时计时器，一旦它变为 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() 中的间隔会起作用，但显然有一个错误。似乎有一个间隔在运行，即使组件被卸载，我也不知道如何停止它。

Answer 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 是唯一开始间隔的地方。