useEffect 里怎么正确获取最新的 state 值？

程序猿新云提问于 2026-03-12 10:14:22 阅读 48

框架

我在 useEffect 里想用最新的 count 值，但每次拿到的都是初始值 0，明明页面上已经显示更新后的数字了。是不是闭包的问题？我试过加依赖数组，也试过不加，都不行。

代码大概是这样的：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 这里总是输出 0
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 只在挂载时运行一次

  return <div>{count}</div>;
}

这到底该怎么解决啊？

Hooks使用 React 性能优化

我来解答赞 15 收藏

反馈

2 条解答

红瑞 Dev Lv1

这确实是闭包的问题。在你的代码里，useEffect依赖数组是空的，所以count的初始值0被“锁定”在了闭包里。

标准写法是在依赖数组里加入需要追踪的state变量。把count加到依赖数组就能解决这个问题：

import { useState, useEffect } from 'react';



function MyComponent() {

  const [count, setCount] = useState(0);



  useEffect(() => {

    const timer = setInterval(() => {

      console.log(count);

      setCount(c => c + 1);

    }, 1000);

    return () => clearInterval(timer);

  }, [count]); // 把 count 加入依赖数组



  return {count}
;

}

不过要注意这样会每秒创建新的定时器。如果只是想间隔更新状态，考虑用 useRef 或者直接在setInterval里使用函数式更新：

useEffect(() => {

  const timer = setInterval(() => {

    setCount(c => {

      console.log(c); // 这样能拿到最新的值

      return c + 1;

    });

  }, 1000);

  return () => clearInterval(timer);

}, []);

这个坑我也踩过不少次，React的闭包真是让人又爱又恨啊。

2026-03-31 11:05

Mc.佳妮 Lv1

确实是闭包问题。你写的空依赖数组导致 useEffect 只在挂载时执行一次，那个 setInterval 回调形成闭包，捕获的是创建时的 count 值（0），所以永远打印 0。

最直接的解决方案是用 useRef 存最新值：

import { useState, useEffect, useRef } from 'react';



function MyComponent() {

  const [count, setCount] = useState(0);

  const countRef = useRef(count);



  // 每次 count 变化时更新 ref

  useEffect(() => {

    countRef.current = count;

  }, [count]);



  useEffect(() => {

    const timer = setInterval(() => {

      console.log(countRef.current); // 现在能拿到最新值了

      setCount(c => c + 1);

    }, 1000);

    return () => clearInterval(timer);

  }, []);



  return {count}
;

}

如果你只是想在 setCount 的时候用到当前值，函数式更新其实就能搞定，不需要 ref：

useEffect(() => {

  const timer = setInterval(() => {

    setCount(c => {

      console.log(c); // 这里 c 就是最新的值

      return c + 1;

    });

  }, 1000);

  return () => clearInterval(timer);

}, []);

但如果你需要在回调里做其他操作（比如判断 count 是否大于某个值再决定下一步），那就得上 ref 了。

另外提醒一下，如果你在依赖数组里加 count，timer 会每次 count 变化时都重建，这个频率就太高了，不推荐。

2026-03-12 11:01