反应计时器不会停止

Question

全部。不知道这次有没有人帮忙

我正在制作计时器，atm 它可以正常工作但不会停止。我有 clearinterval，我有 UseEffect< boolean variable is global

https://codepen.io/DeanWinchester88/pen/gOWNvdY?editors=0011


function Clock(event) {
  let [timerOn,setTimerOn] = React.useState(false);
  let [breakLength,setBreakLength] = React.useState(5);
  let [sessionLength,setSessionLength] = React.useState(25);
  let [timeLeftM, setTimeLeftM] = React.useState(25);
  let [timeLeftS, setTimeLeftS] = React.useState(0);
  let [startStopText,setStartStopText] = React.useState("\u25B6");
  let [fullTimeSec,setFullTimeSec] = React.useState(0);
  let mins;
  let secs;
  
  
  
  React.useEffect(  ()  => {
     setFullTimeSec(sessionLength * 60);
    setTimeLeftM(sessionLength);
  },[sessionLength]);
  
  React.useEffect(  () => {
    const countdown = () =>{
     setFullTimeSec(fullTimeSec--);
     mins = Math.floor((fullTimeSec/60) % 60);
     secs = Math.floor(fullTimeSec % 60);
     setTimeLeftM(mins);
     setTimeLeftS(secs);
      
     
    };
   if(timerOn == true){
     setStartStopText('\u23F8');
     setInterval(countdown, 1000);
   } else if(timerOn === false){
     setStartStopText('\u25B6');
     console.log("here should be a pause and this much seconds left but fucked up")
     mins = Math.floor((fullTimeSec/60) % 60);
     secs = Math.floor(fullTimeSec % 60);
     setTimeLeftM(mins);
     setTimeLeftS(secs);
   };
    return function cleanup() {
      clearInterval(countdown);
      console.log("Actual time full in secs",fullTimeSec )
    };
   
    
    
  },[timerOn]);
  
  const reset = () => {
    setBreakLength(5);
    setSessionLength(25);
  }

Answer 1

调用setInterval时需要添加一个变量来存储interval。它将传递给 clearInterval

let interval;
if(timerOn == true){
   setStartStopText('\u23F8');
   interval = setInterval(countdown, 1000);
}

return function cleanup() {
  interval && clearInterval(interval);
  console.log("Actual time full in secs",fullTimeSec )
};

反应计时器不会停止

REact timer doesn't stop

timer

reactjs

react-hooks