Question

我的计时器在达到零后从未停止（它一直在屏幕上递减计数）。我在计时器上做了一个console.log，我看到，虽然屏幕上的时间在递减，但是console.log返回的计时器从没有真正改变它的值。有什么想法吗？我不是在正确设置状态或类似的东西吗？

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {break:5,
session:25,
timer: 1500}

  this.handleClick = this.handleClick.bind(this);
  this.handleTimer=this.handleTimer.bind(this);
   }

handleClick(event){
const id= event.target.id;
let breakvar= this.state.break;
let sessionvar= this.state.session;
if (id==="break-increment" && breakvar<=59){
this.setState((state) => ({
  break: this.state.break +1}));}

else if (id==="break-decrement" && breakvar>1){
this.setState((state) => ({
  break: this.state.break -1}));}

else if(id==="reset"){
this.setState((state) => ({
 break: 5, session: 25, timer: 1500}));  
}  


else if (id==="session-increment" && sessionvar <=59){
this.setState((state) => ({
session: this.state.session +1, timer: this.state.timer + 60}));}

else if(id==="session-decrement" && sessionvar>1){
this.setState((state) => ({
  session: this.state.session -1, timer:this.state.timer - 60}));}

}

handleTimer(evt){
let timer=this.state.timer;

let Interval=setInterval(() => { 
        this.setState({
            timer: this.state.timer - 1
        })
   console.log(timer) },1000)
if(timer ===0){
  clearInterval(Interval)
}
}





Clock(){
    let minutes = Math.floor(this.state.timer / 60);
    let seconds = this.state.timer - minutes * 60;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return minutes + ':' + seconds;
}









render() {
    return(
            <div id="container">
                <Display break={this.state.break} displayTime={this.Clock()} session={this.state.session}/>
                <p id="break-label">Break length</p>
                <Button onClick={this.handleClick} id="break-increment"/>
                <Button onClick={this.handleClick} id="break-decrement"/>
                <p id="session-label">Session length</p>
                <Button onClick={this.handleClick} id="session-increment" />
                <Button onClick={this.handleClick} id="session-decrement"/>
                <Button onClick={this.handleTimer} id="start_stop"/>
                <Button onClick={this.handleClick} id="reset"/>
            </div>
)

}

Answer 1

这是一个“结构性问题”。

您仅在处理程序中检查条件一次，而不是在每秒调用的“子函数”内部进行检查。

您需要将“动作” /条件移至“间隔主体fn”，例如：

product_notes_path(@product)

反应：有条件地设置setInterval

1 个答案: