ReactJS中的计时器倒计时不起作用

Question

我正在构建一个在一秒钟内计算点击量的web应用程序，但是倒计时(从5到0(不起作用。倒计时应该每秒钟(1000毫秒(递减一次。我试过使用setInterval((，但它不起作用，现在我不知道我必须做什么

import React, {Component} from 'react';
import './App.scss';
class App extends Component {
state = {
count: 0,
cps: 0,
seconds: 5,
target: '',
}
five = 5000;
fiveSeconds = () => {
this.increment = () => {
this.setState({
count: this.state.count + 1,
})
}
this.countdown = setInterval(() => {
this.setState({ seconds: this.state.seconds - 1})

if (this.state.seconds <= 0){
this.setState({ seconds: 0 });
}
}, 1000)
this.timeout = setTimeout(() => {
this.setState({ target: 'true', cps: this.state.count/this.five*1000 });
if(this.state.count == 59){
this.setState({ cps: 11.8 })
}
}, this.five)
}
render(){
return (
<div>
<h3 id="counter-title">COUNTER: <a href="/" id="counter">{this.state.count}</a></h3>
<h3 id="counter-title">CPS: {this.state.cps}</h3>
<h3>TIMER: {this.state.seconds}</h3>
<br/>
<button disabled={this.state.target} id="btn" onClick={this.fiveSeconds}>CLICK HERE TO START</button>
</div>
);
}
}
export default App;

Answer 1

我把你的代码放在react操场上，它似乎从5开始倒计时。真正的问题是，你可以多次点击该按钮，每次点击都会触发5秒功能，这将使倒计时更快。

该按钮应在第一次点击后通过在fiveSeconds函数中将"目标"状态变量设置为true来禁用，或者函数fiveSecond应只运行一次。一种方法是添加一个名为ex.startFlag的新状态变量，该变量初始化为false，并在单击后立即将fiveSeconds设置为true。然后在按钮上加一个三进制，例如onClick＝｛this.setFlag＝＝＝false？this.liveSeconds:null｝。