反应功能组件：clearInterval（）不会清除我的间隔

Question

我正在构建一个简单的计时器应用程序。当用户单击播放时，handlePlayPause将调用该功能。我创建了一个isRunning布尔值以检查计时器是否已在运行。如果不是，则计时器将启动（第一部分起作用），如果是，pauseTimer则调用该函数。最后一个函数切换isRunning 回false并应清除间隔。但是，间隔不会清除。你能看出我做错了吗？

export default function App() {

  const [sessionLength, setSessionLength] = useState(25)

  const [breakLength, setBreakLength] = useState(5)

  const [timeLeft, setTimeLeft] = useState(25 * 60 * 1000)

  const [isRunning, setIsRunning] = useState(false)

  let intervalId = null

  let handlePlayPause = () => {

    if (!isRunning) {

      setTimeLeft(sessionLength * 60 * 1000)

      playTimer()

    } else if (isRunning) {

      pauseTimer()

    }

  }

  let playTimer = () => {

    setIsRunning(true)

    intervalId = setInterval(() => {

      setTimeLeft(timeLeft => timeLeft - 1000)

      parseToMinuteSeconds(timeLeft)

    }, 1000)

  }

  let pauseTimer = () => {

    setIsRunning(false)

    clearInterval(intervalId)

  }

  let resetAll = () => {

    setSessionLength(25)

    setBreakLength(5)

  }

  let parseToMinuteSeconds = timeInMilliseconds => {

    return //a string with the time in this format 00:00

  }

  return ( 

     <div className="App">

        <Background>

           <UpperMetalBand />

           <UpperPart />

           <LowerPart />

           <LowerMetalBand />

           <Wrapper>

              <Title>Pomodoro</Title>

              <Subtitle>TIMER</Subtitle>

              <PlayButton 

                  id="start_stop"

                  onClick = {handlePlayPause}

              >

               

                 <i className="fas fa-sync-alt" />

              </Reload>

              <Session 

                 setSessionLength={setSessionLength}

                 sessionLength={sessionLength}

              />

              <Break 

                 setBreakLength={setBreakLength}

                 breakLength={breakLength}

              />

              <span id="time-label">

                 <Timer id="time-left">00:00</Timer>

              </span>

           </Wrapper>

        </Background>

     </div>

  )

}

Answer 1

我认为问题在于您如何存储间隔ID。当使用功能组件并且我们想存储“实例”变量时，我们可以使用useRef钩子。&nbsp; &nbsp;let intervalId = useRef(null)&nbsp; let handlePlayPause = () => {&nbsp; &nbsp; debugger&nbsp; &nbsp; if (!isRunning) {&nbsp; &nbsp; &nbsp; setTimeLeft(sessionLength * 60 * 1000)&nbsp; &nbsp; &nbsp; playTimer()&nbsp; &nbsp; } else if (isRunning) {&nbsp; &nbsp; &nbsp; pauseTimer()&nbsp; &nbsp; }&nbsp; }&nbsp; let playTimer = () => {&nbsp; &nbsp; setIsRunning(true)&nbsp; &nbsp; intervalId.current = setInterval(() => {&nbsp; &nbsp; &nbsp; console.log('interval')&nbsp; &nbsp; &nbsp; setTimeLeft(timeLeft => timeLeft - 1000)&nbsp; &nbsp; &nbsp; parseToMinuteSeconds(timeLeft)&nbsp; &nbsp; }, 1000)&nbsp; }&nbsp; let pauseTimer = () => {&nbsp; &nbsp; setIsRunning(false)&nbsp; &nbsp; clearInterval(intervalId.current)&nbsp; }在react docs上有一个与您的用例类似的示例