Javascript React类中的清除间隔

我们有一个简单的React组件，它从父组件接收一个整数。单击按钮时，我们在屏幕上显示整数，然后开始倒计时

问题是我怎样才能停止倒计时。在阅读其他SO帖子时，我发现了关于clearInterval（）的内容，但我似乎遗漏了一些东西

任何帮助都将不胜感激。如果有人愿意向我解释示例代码没有按预期工作的原因，将获得额外的感谢积分

    import React from "react";

    export default class TestInterval extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                countDown: this.props.countDown, // An integer from father component
            }
        }

        timer = () => {
            setInterval(() => {
                if (this.state.countDown === 0) {
                    this.stopCountDown();
                }
                this.setState( prevState => ({
                    countDown: prevState.countDown - 1, 
                }));
            }, 1000)
        }

        startCountDown = () => {
            this.timer();
        }

        stopCountDown = () => {
            clearInterval(this.timer); // Not working
        }

        render () {
            return (
                <div>
                    <button onClick={this.startCountDown}>
                        Start Countdown
                    </button>
                    <p>{this.state.countDown}</p>
                </div>
            );
        }
    }

从“React”导入React；
导出默认类TestInterval扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
倒计时：this.props.countDown，//父组件中的整数
}
}
计时器=（）=>{
设置间隔（（）=>{
if（this.state.countDown==0）{
这是。停止倒计时（）；
}
this.setState（prevState=>({
倒计时：prevState.countDown-1，
}));
}, 1000)
}
开始计数=（）=>{
这个.timer（）；
}
停止倒计时=（）=>{
clearInterval（this.timer）；//不工作
}
渲染（）{
返回(
开始倒计时
{此.状态.倒计时}

);
}
}

您需要存储从

setInterval

返回的间隔引用
从：

它返回一个唯一标识间隔的间隔ID，因此 您可以稍后通过调用clearInterval（）将其删除

因此，您的代码应该如下所示，例如：

this.interval = setInterval(() => {...

然后清除它：

 clearInterval(this.interval);

我会在状态真正设置后检查条件（

setState

是异步的），您可以在

setState

的回调中进行检查

this.interval = setInterval(() => {
      this.setState(prevState => ({
        countDown: prevState.countDown - 1,
      }), () => {
        if (this.state.countDown === 0) {
          this.stopCountDown();
        }
      });
    }, 1000)

运行示例：

类TestInterval扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 倒计时：this.props.countDown，//父组件中的整数 } } 计时器=（）=>{ this.interval=setInterval（（）=>{ this.setState（prevState=>({ 倒计时：prevState.countDown-1， }), () => { if（this.state.countDown==0）{ 这是。停止倒计时（）； } }); }, 1000) } 开始计数=（）=>{ 这个.timer（）； } 停止倒计时=（）=>{ clearInterval（this.interval）；//不工作 } render（）{ 返回( 开始倒计时 {此.状态.倒计时}

); } } ReactDOM.render（，document.getElementById（'root'））

这个问题实际上与React无关。它是关于普通Javascript的，实际上它与react有关，因为OP检查的条件在错误的位置，react的生命周期方面。