第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

反應(yīng)功能組件:clearInterval()不會清除我的間隔

反應(yīng)功能組件:clearInterval()不會清除我的間隔

德瑪西亞99 2021-04-02 22:19:43
我正在構(gòu)建一個簡單的計時器應(yīng)用程序。當用戶單擊播放時,handlePlayPause將調(diào)用該功能。我創(chuàng)建了一個isRunning布爾值以檢查計時器是否已在運行。如果不是,則計時器將啟動(第一部分起作用),如果是,pauseTimer則調(diào)用該函數(shù)。最后一個函數(shù)切換isRunning 回false并應(yīng)清除間隔。但是,間隔不會清除。你能看出我做錯了嗎?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>  )}
查看完整描述

1 回答

?
Cats萌萌

TA貢獻1805條經(jīng)驗 獲得超9個贊

我認為問題在于您如何存儲間隔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上有一個與您的用例類似的示例


查看完整回答
反對 回復(fù) 2021-04-08
  • 1 回答
  • 0 關(guān)注
  • 213 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號