Javascript 嵌套的setInterval变为负数

我嵌套的setInterval（在breakValueBegins（）中）不断倒计时，最终变成负数，尽管它是一个阻止它的条件（我反复检查if条件是否在setInterval内，循环是否正确设置。这也不是一个异步问题，因为否则间隔将永远不会开始）。我不知道为什么。有没有办法解决这个问题

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state ={
    breakSession:5,
    session:25,
    timer: 1500,
    isPaused:true,
    breakValue:300
}
this.handleSession = this.handleSession.bind(this);
this.handleTimer=this.handleTimer.bind(this);
}



handleSession(event){
const id= event.target.id;
let breakvar= this.state.breakSession;
let sessionvar= this.state.session;
let isPaused=this.state.isPaused;

if(isPaused && id==="break-increment" && breakvar<=59){
this.setState((state) => ({
breakSession: this.state.breakSession +1, breakValue:this.state.breakValue + 60}))}

else if (isPaused && id==="break-decrement" && breakvar>1){
this.setState((state) => ({
breakSession: this.state.breakSession -1, breakValue:this.state.breakValue - 60}))}

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

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

}

breakValueBegins() {
  clearInterval(this.Interval);
  this.newInterval = setInterval(() => {
      let breakValue = this.state.breakValue;
      if (breakValue > 0) {
        this.setState({
          breakValue: this.state.breakValue - 1,
          isPaused: false
        })
      } else {
        clearInterval(this.newInterval)}
    }, 10)
}

handleTimer(evt) {
  const id = evt.target.id;
  let isPaused = this.state.isPaused;
  clearInterval(this.Interval)
  this.Interval = setInterval(() => {
    let timer = this.state.timer;
    if (timer > 0) {
      this.setState({
        timer: this.state.timer - 1,
        isPaused: false
      })
    }
    if (id === "reset") {
      clearInterval(this.Interval);
      this.setState((state) => ({
        session: 25,
        timer: 1500,
        breakSession: 5,
        isPaused: true
      }))
    }
    if (!isPaused) {
      clearInterval(this.Interval);
      this.setState((state) => ({
        isPaused: true
      }))
    }
    if (timer === 0) {
      this.breakValueBegins()
    }
  }, 10)
}



Clock(stateProp){
    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 breakValue={this.state.breakValue} breakSession={this.state.breakSession} displayTime={this.Clock()} session={this.state.session}/>
                <p id="break-label">Break length</p>
                <Button onClick={this.handleSession} id="break-increment"/>
                <Button onClick={this.handleSession} id="break-decrement"/>
                <p id="session-label">Session length</p>
                <Button onClick={this.handleSession} id="session-increment" />
                <Button onClick={this.handleSession} id="session-decrement"/>
                <Button onClick={this.handleTimer} id="start_stop"/>
                <Button onClick={this.handleTimer} id="reset"/>
            </div>
)
}

类时钟扩展组件{
建造师（道具）{
超级（道具）；
这个州={
临时会议：5，
会议：25，
计时器：1500，
是的，
breakValue:300
}
this.handleSession=this.handleSession.bind（this）；
this.handleTimer=this.handleTimer.bind（this）；
}
handleSession（活动）{
const id=event.target.id；
让breakvar=this.state.breakSession；
让sessionvar=this.state.session；
让isPaused=this.state.isPaused；
如果（isPaused&&id==“中断增量”&&breakvar({
breakSession:this.state.breakSession+1，breakValue:this.state.breakValue+60}
else if（isPaused&&id==“中断减量”&&breakvar>1）{
this.setState（（状态）=>({
breakSession:this.state.breakSession-1，breakValue:this.state.breakValue-60}
else if（isPaused&&id==“会话增量”&&sessionvar({
会话：this.state.session+1，计时器：this.state.timer+60}）
else if（isPaused&&id==“会话减量”&&sessionvar>1）{
this.setState（（状态）=>({
会话：this.state.session-1，计时器：this.state.timer-60}）
}
breakValueBegins（）{
clearInterval（这个.Interval）；
this.newInterval=setInterval（（）=>{
让breakValue=this.state.breakValue；
如果（断开值>0）{
这是我的国家({
breakValue:this.state.breakValue-1，
原因：错误
})
}否则{
clearInterval（this.newInterval）}
}, 10)
}
手持设备（evt）{
const id=evt.target.id；
让isPaused=this.state.isPaused；
clearInterval（this.Interval）
this.Interval=setInterval（（）=>{
设timer=this.state.timer；
如果（计时器>0）{
这是我的国家({
计时器：this.state.timer-1，
原因：错误
})
}
如果（id==“重置”）{
clearInterval（这个.Interval）；
this.setState（（状态）=>({
会议：25，
计时器：1500，
临时会议：5，
我相信：是的
}))
}
如果（！i暂停）{
clearInterval（这个.Interval）；
this.setState（（状态）=>({
我相信：是的
}))
}
如果（计时器==0）{
这个.breakValueBegins（）
}
}, 10)
}
时钟（stateProp）{
让分钟=数学地板（this.state.timer/60）；
设秒=this.state.timer-分钟*60；
秒=秒<10？'0'+秒：秒；
分钟=分钟<10？'0'+分钟：分钟；
返回分钟+'：'+秒；
}
render（）{
返回(
断开长度
会话长度

)
}

因此，您的问题是，当您声明

breakvalue时，它永远不会被重新赋值，因此，如果您调用
breakValueBegins
时，您的变量将保持与此相同的值。state.breakvalue导致无限递减

试试这样的

breakValueBegins() {
  clearInterval(this.Interval);
  this.newInterval = setInterval(() => {
      let breakValue = this.state.breakValue;
      if (breakValue > 0) {
        this.setState({
          breakValue: this.state.breakValue - 1,
          isPaused: false
        })
      } else {
        clearInterval(this.newInterval)
    }
  }, 10)
}

看，我错了……那又是什么呢？嗯，愚蠢的me-setState（）在事件处理程序中是异步的。我不知道，这就是我为什么要问的原因。这看起来不像是异步问题，因为一切都很完美：它只是在计数达到0后继续下降（如果没有设置状态，setInterval甚至不会开始）.你的意思是它永远不会停止下降。我误解了，我以为你的意思是它变为负数并停止了。谢谢你，这起作用了。为什么会这样？什么改变了？我试着去理解。在每一个间隔中，你都在获取
breakValue
，就像在函数被调用时获取一个一样，并且从不更新它。