React钩子：新状态值未反映在setInterval回调中

Question

我有一个函数反应组件，它有一个从10000开始到0的计数器。

我正在组件安装期间使用useEffect挂钩设置setInterval回调。然后，回调更新计数器状态。

但是不知道为什么，计数值从来没有减少过。每次回调运行时，计数为10000。

（我正在使用react

功能组件如下所示：

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

正如您所说，当组件装入时，您正在声明effect函数。所以在范围内，时间值存储的内部计数等于10000。这意味着每次间隔函数执行时，它都从闭包（10000）中获取计数值。实际上，要正确地做这件事是相当困难的。丹写了关于它的全部博客文章

Answer 2

有两种选择：

1） 在依赖项中包括count

这并不理想，因为这意味着每次更改计数时都会创建一个新的setInterval，因此您需要在每次渲染时清理它，例如：

  useEffect(() => {
    timerID.current = setInterval(() => {
      //count here is always 10000
      if (count - 1 < 0) {
        setCount(0)
      } else {
        setCount(count - 1)
      }
    }, 1)
    return () => clearInterval(timerID.current) // Added this line
  }, [count]) // Added count here

2）在setInterval回调函数中添加count。

这是间隔的最佳方法，因为它避免了一直设置新的间隔。

 useEffect(() => {
    timerID.current = setInterval(() => {
      // count is used inside the setCount callback and has latest value
      setCount(count => {
        if (count - 1 < 0) { // Logic moved inside the function, so no dependencies
          if (timerID.current) clearInterval(timerID.current)
          return 0
        }
        return count - 1
      })
    }, 1)
    return () => {
      if (timerID.current) clearInterval(timerID.current) // Makes sure that the interval is cleared on change or unmount
    }
  }, [])

这是沙盒链接

Answer 3

您需要监视计数中的更改，并清理useffect（）：

useEffect(() => {
    timerID.current = setInterval(() => {
      if (count - 1 < 0) {
        setCount(0)
      } else {
        setCount(count - 1)
      }
    }, 100)

    return () => clearInterval(timerID.current);
  }, [count])

正如@Pavel提到的，Dan Abramov在这里解释了原因。