函数clearInterval在react中不工作

Question

我有一个自动启动的倒计时计时器
我想在时间结束时点击一个按钮重新启动它，实际上在某个时间出现了一个时间或按钮问题：clearInterval不工作，timeInterval工作在500而不是1000有人能帮忙吗？我希望你能理解我所说的话；

constructor(props){
super(props);
this.state = {
time : [0,0,4],
date : new Date(),
counterStop :false,  
};
// autoplay countdown counter
this.startCounter();
}

这是定时器的主要功能，我在这个功能中使用setState

countdown = () =>{
let hr = this.state.time[0];
let mm = this.state.time[1];
let ss = this.state.time[2];
if(hr == 0 && mm == 0 && ss == 0 || mm<0){
this.finishCounter();
this.setState({counterStop:true})
}
ss--;
if(ss < 0)
{
ss = 59;
mm--;
if(mm == 0)
{
mm = 59;
hr--;
}
}

if(hr.toString().length < 2) hr = "0"+hr;
if(mm.toString().length < 2) mm = "0"+mm;
if(ss.toString().length < 2) ss = "0"+ss;
this.setState({
time : [hr,mm,ss]
})
}

clearInterval在这里不工作，我定义时间，因为countDown计时器中的状态发生了变化

finishCounter = () => {
clearInterval(this.startCounter);
this.setState({
time : [0,0,4]
})
console.log('finishCounter')
}
startCounter =()=> {
this.setState({time:[0,0,4],counterStop:false})
setInterval(this.countdown, 1000) ;
}

类组件呈现

render(){
return(
<div>
{
this.state.counterStop 
? <button onClick={this.startCounter.bind(this)} >start counter</button>
: <p>{`${this.state.time[0]} : ${this.state.time[1]} : ${this.state.time[2]}`}</p>
}
<button onClick={this.finishCounter.bind(this)}>stop</button>
</div>        
)
}

Answer 1

要将@jabaa的建议转化为React类组件的显式解决方案，请尝试以下操作：

finishCounter = () => {
clearInterval(this.interval);
this.setState({
time : [0,0,4]
})
console.log('finishCounter')
}
startCounter = () => {
this.setState({time:[0,0,4],counterStop:false})
this.interval = setInterval(this.countdown, 1000);
}