如何在仅挂载执行的useEffect中获取state变量当前值？

问题原因 #

你遇到的是React的闭包陷阱：因为useEffect的依赖数组是空的，定时器回调函数在初始渲染时被创建，会一直捕获此时的n值（也就是初始的0），后续即使通过setN更新了状态，定时器里的n也不会同步变化。

解决方案 #

方案1：用useRef保存最新状态值

useRef的.current属性是可变的，不会被闭包捕获，我们可以在状态更新时同步更新ref，这样定时器就能随时拿到最新的n：

const [n, setN] = useState(0);
const nRef = useRef(n);

// 同步n的最新值到ref
useEffect(() => {
  nRef.current = n;
}, [n]);

useEffect(() => {
  const int_id = setInterval(() => {
    const newN = getN(...);

    if (nRef.current !== newN) {
      setN(newN);
      doApiCall();
    }
  }, 500);

  return () => clearInterval(int_id);
}, []);

方案2：使用函数式状态更新

如果你的逻辑只需要在更新状态时获取最新值，可以利用setN的函数式形式——它会自动接收当前的最新状态作为参数，不需要依赖外部变量：

const [n, setN] = useState(0);

useEffect(() => {
  const int_id = setInterval(() => {
    const newN = getN(...);

    setN(prevN => {
      if (prevN !== newN) {
        doApiCall();
        return newN;
      }
      // 状态未变化时返回原值，避免不必要的重渲染
      return prevN;
    });
  }, 500);

  return () => clearInterval(int_id);
}, []);

这种方式不需要额外的ref，更简洁，但如果需要在判断阶段就使用最新的n，方案1会更直接。

方案3：给useEffect添加n作为依赖

把n加入useEffect的依赖数组，这样每次n变化时都会重新创建定时器（同时清除旧的），此时定时器里的n会是最新值：

const [n, setN] = useState(0);

useEffect(() => {
  const int_id = setInterval(() => {
    const newN = getN(...);

    if (n !== newN) {
      setN(newN);
      doApiCall();
    }
  }, 500);

  return () => clearInterval(int_id);
}, [n]);

注意：这种方式会在n更新时重启定时器，如果你的业务场景允许这种行为，可以选择该方案。

内容的提问来源于stack exchange，提问作者Alex