Reactjs 为什么我的clearInterval无法停止setInterval？

我是个全新的反应者。我尝试实现的是一个计时器。当单击小时、分钟或秒时，计时器将停止，对于选定的计时器，当按下enter按钮时，它将变成一个输入字段，不应显示任何其他输入字段，并重新启动时钟。

我尝试在单击flexbox容器时停止向子组件传递新道具。我编写了一个handleClick函数，并基于状态中的更新变量setInterval（）或clearInterval（）

constructor(props) {
    this.timerRef = React.createRef();
  }

  componentDidMount() {
    this.timerRef.current = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerRef.current);
  }

我想要的是，当我单击任何一个小时/分钟/秒时，选择字段将更改为输入字段，计时器停止。一旦我按下回车键，它将返回计时器。

类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
this.timerRef=React.createRef（）；
此.state={
hh:new Date（）.getHours（）.toString（）.padStart（2，“0”），
mm:new Date（）.getMinutes（）.toString（）.padStart（2，“0”），
ss:new Date（）.getSeconds（）.toString（）.padStart（2，“0”），
后缀：new Date（）.getHours（）>12？“PM”：“AM”，
更新:对,，
};
}
勾选（）{
这是我的国家({
hh:new Date（）.getHours（）.toString（）.padStart（2，“0”），
mm:new Date（）.getMinutes（）.toString（）.padStart（2，“0”），
ss:new Date（）.getSeconds（）.toString（）.padStart（2，“0”），
后缀：new Date（）.getHours（）>12？“PM”：“AM”，
})
}
componentDidMount（）{
this.intervalId=setInterval(
（）=>this.tick（），1000
);
}
组件将卸载（）{
clearInterval（此为有效期）；
}
handleClick（）{
this.setState（state=>（{update:！state.update}））；
console.log（“1”，this.state.update）；
if（this.state.update）{
this.intervalId=setInterval(
（）=>this.tick（），1000
);
console.log（“2个设置间隔”，this.intervalId）；
}
否则{
clearInterval（此为有效期）；
控制台日志（“2个清除间隔”）；
}
}
render（）{
const{hh，mm，ss，suffix}=this.state；
返回(
伦敦钟
this.handleClick（）}>
:

:

{后缀}

);
}
}
类内容扩展了React.Component{
状态={
编辑模式：false，
时间：“
};
componentDidMount（）{
这是我的国家({
时间：这个。道具。时间，
})
}
handleKeyDown（事件）{
console.log（event，event.key=='Enter'）；
如果（event.key=='Enter'）{
这是我的国家({
编辑模式：false，
})
} 
}
render（）{
const{editMode}=this.state；
返回(
{编辑模式(

这个.handleKeyDown（e）}
/>

) : (
this.setState（{editMode:true}}>{this.props.time}
)}
);
}
}
ReactDOM.render(
,
文件正文
);
.flexbox容器{
显示器：flex；
弯曲方向：行；
}
.后缀{
左侧填充：20px；
}
.盒子{
边框样式：实心；
填充：10px；
}
尝试如下操作，而不是设置为state并绑定您的
勾选功能

       componentDidMount(){
            this.intervalId = setInterval(
                () => this.tick.bind(this), 1000
            );
        }
        
        componentWillUnmount(){
            clearInterval(this.intervalId);
        }

尝试如下操作，而不是设置为state并绑定
勾选
函数

       componentDidMount(){
            this.intervalId = setInterval(
                () => this.tick.bind(this), 1000
            );
        }
        
        componentWillUnmount(){
            clearInterval(this.intervalId);
        }

我想你可以用React的Ref来代替state

constructor(props) {
    this.timerRef = React.createRef();
  }

  componentDidMount() {
    this.timerRef.current = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerRef.current);
  }

我想你可以用React的Ref来代替state

constructor(props) {
    this.timerRef = React.createRef();
  }

  componentDidMount() {
    this.timerRef.current = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerRef.current);
  }

安装组件时，它将启动一个间隔并将其分配给
intervalId

您的clickhandler修改状态，然后立即尝试查看状态，而无需等待更新。此时状态可能未更新，因此它会重新分配间隔，从而生成僵尸更新程序

将回调传递到
setState（updater，[callback]）
或将间隔逻辑移动到
componentdiddupdate
，这将允许您在安装组件时消除重复的间隔逻辑，它将启动一个间隔并将其分配给
intervalId

您的clickhandler修改状态，然后立即尝试查看状态，而无需等待更新。此时状态可能未更新，因此它会重新分配间隔，从而生成僵尸更新程序

要么将回调传递给
setState（updater，[callback]）
，要么将间隔逻辑移动到
componentdiddupdate
，这将允许您消除重复的间隔逻辑，因为它不起作用。我觉得问题出在handleClick函数中，即使我看到程序在handleClick中执行clearInterval，它仍然在不断更新子组件。它不起作用。我觉得问题出在handleClick函数中，即使我看到程序在handleClick中执行clearInterval，它仍在不断更新子组件。感谢您的回复，但我真正的问题是我试图根据handleClick（）中的clearInterval的状态，它将不起作用。componentDidMount（）和componentWillUnmount（）看起来不错。是的，您也可以在handleClick中使用这种方法。我在过去的项目中遇到了同样的问题，并以这种方式解决了这个问题。我认为您应该将interval id存储到ref中，而不是state。我认为使用ref是可行的，@dube对我来说更简单。谢谢你的回答！谢谢你的回复，但我真正的问题是我试图根据handleClick（）的状态来清除interval，但它不会工作。componentDidMount（）和componentWillUnmount（）看起来不错是的，