ReactJS自定义hook的remove函数无法获取最新状态数据

问题描述 #

我开发了一个用于通知组件的自定义hook useNotifications，它返回类似ant.design message API的数组，包含：

• add：添加新通知的函数，调用后返回该通知的唯一ID
• remove：接收通知ID并删除对应通知的函数
• contextHandler：供组件渲染的JSX节点

当前核心问题：在调用add添加新通知后**立即调用remove**时，remove函数获取到的是旧的通知列表副本，无法匹配到刚添加的通知，进而触发报错。需要在完全保留现有组件使用API的前提下解决该问题。

解决方案 #

1. 采用函数式更新操作通知状态 #

避免直接依赖闭包中的旧状态值，改用React的函数式更新方式获取最新的通知列表。这种方式能确保每次状态更新都基于最新的状态快照，彻底规避闭包导致的旧值问题。

示例代码：

const remove = useCallback((id) => {
  setNotifications(prevNotifications => 
    prevNotifications.filter(notification => notification.id !== id)
  );
}, []);

2. 用useRef同步保存最新通知列表 #

如果需要在函数中直接访问最新的通知数据，可以通过useRef创建一个引用，每次通知列表更新时同步更新该引用的current值。这样remove函数就能随时获取到最新的通知列表，无需依赖闭包中的状态。

示例代码：

const notificationsRef = useRef(notifications);

useEffect(() => {
  notificationsRef.current = notifications;
}, [notifications]);

const remove = useCallback((id) => {
  const updatedNotifications = notificationsRef.current.filter(
    notification => notification.id !== id
  );
  setNotifications(updatedNotifications);
}, []);

3. 确保add/remove函数引用稳定 #

使用useCallback包裹add和remove函数，避免组件重渲染导致函数引用频繁变化。同时结合函数式更新，保证add函数也基于最新状态添加通知：

const add = useCallback((options) => {
  const id = Date.now().toString(); // 简易ID生成逻辑，可替换为更可靠的方式
  setNotifications(prevNotifications => [...prevNotifications, { id, ...options }]);
  return id;
}, []);

通过以上方案，即使在add调用后立即执行remove，也能确保操作的是最新的通知列表，不会出现找不到目标通知的报错。

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