放置倒计时计时器的setTimeout的位置

Question

在React中使用倒计时计时器，但不了解如何/在哪里放置setTimeout函数。当我在返回之前把它放在渲染中时，它似乎起作用，但当时没有定义状态属性，所以它开始从零到负数计数：/我尝试过这样做：

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
start: '', //'10:10:10'
end: '',
startSec: '', //'36610'
endSec: ''
}
this.clicked = this.clicked.bind(this);
this.handleTimeout = this.handleTimeout.bind(this);
}
handleTimeout() {
// decrement state.startSec
//^thought this would trigger re-render every sec when  
//called in clicked() 
}
clicked() {
let re=/^([0-1]d|2[0-3]):([0-5]d):([0-5]d)$/;
let validStart = re.test(this.state.start);
let validEnd = re.test(this.state.end);
let start = this.state.start.split(":");
let end = this.state.end.split(":");
let startSec =  (Number(start[0]) * 3600) + (Number(start[1]) * 60) + (Number(start[2]));
let endSec = (Number(end[0]) * 3600) + (Number(end[1]) * 60) + (Number(end[2]));

// validate inputs
if(!validStart || !validEnd) { alert('please use format HH:MM:SS') }     
if(endSec > startSec) {
alert('Please make end time less than start time!');
}
//where I am stuck
this.setState({ startSec: startSec }); 
if(this.state.startSec > this.state.endSec) {
setInterval(this.handleTimeout() ,1000);
}
}
render () {
return (
<div>
<h2> Timer </h2>
<div id="timer">
Start Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({start: e.target.value})}} /><br />
End Time <input type="text" placeholder="hh:mm:ss" onChange={(e) => {this.setState({end: e.target.value})}}/> <br /><br />
<button onClick={this.clicked}> Start Countdown </button><br /><br />
<div id="output">{this.state.startSec}</div>
</div>
</div>
);
}
}

更新https://jsfiddle.net/lydiademi/69z2wepo/91973/

我引用了React 中与计时器相关的帖子，如倒计时计时器

但无法连接到这个问题，

谢谢你的帮助。。！

Answer 1

它只调用一次的原因是需要将函数传递到setInterval中，而不是调用函数并传递其返回值(未定义)。

所以不是

setInterval(this.handleTimeout() ,1000);

应该是

setInterval(this.handleTimeout ,1000);

• 您需要跟踪以前启动的间隔，以便在启动新间隔之前停止它们

if(this.currentInterval) {
clearInterval(this.currentInterval);
}
this.currentInterval = setInterval(this.handleTimeout, 1000);