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是唯一启动间隔的位置。

ComponentWillUnmount（）不清除间隔

1 个答案: