Javascript ComponentWillUnmount（）不'；t清除间隔

我有一个倒计时器，当一个方法变为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;

import React，{Component}来自'React'；
类倒计时扩展组件{
状态={
计时器：这个。道具。计时器
}
递减率=（）=>{
如果（this.state.timer>0）{
这是我的国家({
计时器：this.state.timer-1
});
}否则{
clearInterval（此.timerFunction）；
this.props.timeNext（）；
this.setState（{timer:this.props.timer}）；
这个。减量（）；
}
};
减量{
this.timerFunction=setInterval（（）=>{
这是一个。递减的最小值（）；
}, 1000);
}
componentDidMount（）{
这个减量
}
组件将卸载（）{
console.log（“卸载”）
clearInterval（此.timerFunction）；
}
render（）{
返回(
{this.state.timer}
)
}
}
出口默认倒计时；

---

我怀疑它在某个地方引起了一个无限循环。我原以为清除

组件中的间隔将卸载（）

会起作用，但显然存在错误。即使在卸载组件时，也似乎有一个间隔在运行，我不知道如何停止它。

我认为您的递减功能过于复杂了。我会像这样重构函数：

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

---

现在，componentWillUnmount是唯一调用clearInterval的地方，componentDidMount是唯一启动interval的地方。

我看不出this.timerFunction是在什么地方定义的，除了在decrement的函数体中，因为decrement没有声明为lambda，所以它有自己的这个作用域。我猜这是你的问题。如果像decrementTimeRemaining一样声明decrement，它可能会起作用，因为this.timerFunction将绑定到倒计时类的作用域。不幸的是，它无法解决此问题。您应该将this.state.timer重置为默认值，而不是在计时器函数内调用decrement（）。计时器函数中对decrement（）的调用至少是一种竞争条件。您可以编辑您的问题以包含所有相关的代码段吗？如果您不向我们展示正在传递的函数和道具，我们就不知道问题出在哪里。嗨！也许你可以在这里找到答案谢谢，你就是那个人！我想我明白了，你不需要清除间隔，你只要让它滚动一个新的值。我想我必须清除间隔，当它达到零时开始一个新的间隔。