Javascript clearInterval在React Timer应用程序中不工作

我一直在努力通过创建一个pomodoro定时器应用程序来提高我的反应技能。由于某种原因，我似乎无法使

clearInterval

工作：

startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

没有控制台错误。可以确认它确实在运行条件语句的那部分（当我记录

this.state.started

时，它显示

false

）。计时器一直在滴答作响，实际上并没有停止

代码的其余部分：

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

import React，{Component}来自'React'；
类计时器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秘书：60，
开始：错误
};
this.startTimer=this.startTimer.bind（this）；
this.countdown=this.countdown.bind（this）；
}
倒计时{
this.setState（{secs:this.state.secs-1}）；
}
startTimer（）{
const{started}=this.state；
无功定时器；
如果（！已启动）{
定时器=设置间隔（此为倒计时，1000）；
this.setState（{start:true}）；
}
否则{
清除间隔（计时器）；
this.setState（{start:false}）；
}
}
render（）{
const{secs}=this.state；
console.log（'secs:'，secs）
console.log（'started:'，this.state.started）；
返回(
一场
{this.props.session}:{secs==60？'00'：secs}
);
}
}
导出默认定时器；

初始化构造函数中的此计时器。然后创建

setInterval

，并将其分配给

this.timer

，这将允许您稍后清除它

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.timer = null;
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    if (!started) {
      this.timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(this.timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

import React，{Component}来自'React'；
类计时器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秘书：60，
开始：错误
};
this.timer=null；
this.startTimer=this.startTimer.bind（this）；
this.countdown=this.countdown.bind（this）；
}
倒计时{
this.setState（{secs:this.state.secs-1}）；
}
startTimer（）{
const{started}=this.state；
如果（！已启动）{
this.timer=setInterval（this.countdown，1000）；
this.setState（{start:true}）；
}
否则{
clearInterval（这个计时器）；
this.setState（{start:false}）；
}
}
render（）{
const{secs}=this.state；
console.log（'secs:'，secs）
console.log（'started:'，this.state.started）；
返回(
一场
{this.props.session}:{secs==60？'00'：secs}
);
}
}
导出默认定时器；

初始化构造函数中的此计时器。然后创建

setInterval

，并将其分配给

this.timer

，这将允许您稍后清除它

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.timer = null;
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    if (!started) {
      this.timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(this.timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

import React，{Component}来自'React'；
类计时器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秘书：60，
开始：错误
};
this.timer=null；
this.startTimer=this.startTimer.bind（this）；
this.countdown=this.countdown.bind（this）；
}
倒计时{
this.setState（{secs:this.state.secs-1}）；
}
startTimer（）{
const{started}=this.state；
如果（！已启动）{
this.timer=setInterval（this.countdown，1000）；
this.setState（{start:true}）；
}
否则{
clearInterval（这个计时器）；
this.setState（{start:false}）；
}
}
render（）{
const{secs}=this.state；
console.log（'secs:'，secs）
console.log（'started:'，this.state.started）；
返回(
一场
{this.props.session}:{secs==60？'00'：secs}
);
}
}
导出默认定时器；

如果不尝试创建类

 if(condition_is_true){
   const checkUntilConditionIsFalse = setInterval(() => {
    if (condition_is_false) {
      clearInterval(checkUntilConditionIsFalse);
    }
  }, 1000);
}

---

如果您不想创建一个类

 if(condition_is_true){
   const checkUntilConditionIsFalse = setInterval(() => {
    if (condition_is_false) {
      clearInterval(checkUntilConditionIsFalse);
    }
  }, 1000);
}

---

你知道每次调用函数时，

timer

都会重置，所以你没有保留计时器的ID吗？不，否则我就不会问这个问题了。你知道每次调用函数时，

timer

都会重置，所以你没有保留计时器的ID吗？不，否则我不会问这个问题问题以哪里是初始化

计时器的最佳位置开始？我试图在
构造函数中初始化它，但是我遇到了一个语法错误：你是如何初始化它的？
构造函数（props）{super（props）；this.state={secs:60，start:false}；this.startTimer=this.startTimer.bind（this）；this.countdown=this.countdown.bind（this）；const timer；}
尝试
this.timer=null
并在整个过程中使用
this.timer
。现在工作正常。非常感谢。初始化
计时器的最佳位置在哪里？我试图在
构造函数中初始化它，但是我遇到了一个语法错误：你是如何初始化它的？
构造函数（props）{super（props）；this.state={secs:60，start:false}；this.startTimer=this.startTimer.bind（this）；this.countdown=this.countdown.bind（this）；const timer；}
尝试
this.timer=null
并在整个过程中使用
this.timer
。现在工作正常。非常感谢。