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

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

Answer 2

如您所说的那样，您在安装组件时声明了效果功能。因此，在该范围内，时间值存储内部计数等于10000。这意味着每个时间间隔函数执行都从闭包（10000）中获取计数值。正确地做到这一点实际上很难。