React自定义钩子回调函数无法获取最新状态值问题求助

方案一：使用函数式更新（推荐） #

React的setState支持传入函数，函数会接收当前最新的状态值作为参数，直接绕过闭包捕获旧值的问题。

修改add方法里的remove回调，将依赖外部状态的更新逻辑改为函数式更新：

const add = (alert) => {
  const id = Date.now(); // 生成唯一ID标识告警
  const newAlert = { ...alert, id };
  setAlerts(prevAlerts => [...prevAlerts, newAlert]);

  const remove = () => {
    // 直接从React获取最新状态，无需依赖外部闭包的alerts
    setAlerts(prevAlerts => prevAlerts.filter(item => item.id !== id));
  };

  return remove;
};

这种方式彻底脱离对外部alerts变量的依赖，从根源上避免闭包问题。

方案二：使用useRef保存最新状态引用 #

如果需要在回调中直接读取最新的alerts值，可以用useRef维护一个指向当前状态的引用，每次状态更新时同步更新该ref：

const useAlerts = () => {
  const [alerts, setAlerts] = useState([]);
  const alertsRef = useRef(alerts);

  // 状态更新时同步ref的指向
  useEffect(() => {
    alertsRef.current = alerts;
  }, [alerts]);

  const add = (alert) => {
    const id = Date.now();
    const newAlert = { ...alert, id };
    setAlerts([...alertsRef.current, newAlert]);

    const remove = () => {
      // 直接从ref获取最新状态
      setAlerts(alertsRef.current.filter(item => item.id !== id));
    };

    return remove;
  };

  return { alerts, add };
};

注：如果需要保证状态更新的原子性，建议结合方案一的函数式更新使用ref。

方案三：用useCallback包裹回调（适配组件传参场景） #

如果remove回调需要传递给子组件，可通过useCallback配合函数式更新优化，减少不必要的回调重建：

const add = (alert) => {
  const id = Date.now();
  const newAlert = { ...alert, id };
  setAlerts(prev => [...prev, newAlert]);

  // 仅依赖id，避免因alerts变化频繁重建回调
  const remove = useCallback(() => {
    setAlerts(prev => prev.filter(item => item.id !== id));
  }, [id]);

  return remove;
};

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