javascript - 反应钩子：新状态值未反映在 setInterval 回调中

Question

我有一个函数反应组件，它有一个从 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

这是codesandbox的链接：link

标签： javascriptreactjsreact-hooks

Answer 1

您需要注意 中的变化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在这里解释了原因。