亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

React Hooks:新的狀態值未反映在setInterval回調中

React Hooks:新的狀態值未反映在setInterval回調中

慕少森 2021-04-01 18:15:55
我有一個函數react組件,該組件的計數器從10000開始,然后變為0。我在組件安裝期間使用useEffect鉤子設置了setInterval回調?;卣{然后更新計數器狀態。但我不知道為什么,count價值永遠不會減少。每次回調運行count為10000。(我正在使用react&react-dom版本16.8.3)功能組件如下:import React, { useState, useEffect, useRef } from 'react'const Counter = () => {  const timerID = useRef()  let [count, setCount] = useState(10000)  useEffect(() => {    timerID.current = setInterval(() => {      //count here is always 10000      if (count - 1 < 0) {        setCount(0)      } else {        setCount(count - 1)      }    }, 1)  }, [])  return <h1 className="counter">{count}</h1>}export default Counter
查看完整描述

3 回答

?
holdtom

TA貢獻1805條經驗 獲得超10個贊

您需要注意中的更改count,并清理以下內容useEffect():


useEffect(() => {

    timerID.current = setInterval(() => {

      if (count - 1 < 0) {

        setCount(0)

      } else {

        setCount(count - 1)

      }

    }, 100)


    return () => clearInterval(timerID.current);

  }, [count])

正如@Pavel所述,Dan Abramov在這里解釋了原因。


查看完整回答
反對 回復 2021-04-22
?
青春有我

TA貢獻1784條經驗 獲得超8個贊

如您所說的那樣,您在安裝組件時聲明了效果功能。因此,在該范圍內,時間值存儲內部計數等于10000。這意味著每個時間間隔函數執行都從閉包(10000)中獲取計數值。正確地做到這一點實際上很難。

查看完整回答
反對 回復 2021-04-22
  • 3 回答
  • 0 關注
  • 291 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號