反应功能组件：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钩子。

   let intervalId = useRef(null)

  let handlePlayPause = () => {

    debugger

    if (!isRunning) {

      setTimeLeft(sessionLength * 60 * 1000)

      playTimer()

    } else if (isRunning) {

      pauseTimer()

    }

  }

  let playTimer = () => {

    setIsRunning(true)

    intervalId.current = setInterval(() => {

      console.log('interval')

      setTimeLeft(timeLeft => timeLeft - 1000)

      parseToMinuteSeconds(timeLeft)

    }, 1000)

  }

  let pauseTimer = () => {

    setIsRunning(false)

    clearInterval(intervalId.current)

  }

在react docs上有一个与您的用例类似的示例