React hooks：新的状态值未反映在 setInterval 回调中

Question

我有一个函数 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

这是codesandbox的链接：链接

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在这里解释了原因。