react-redux状态更新后在useHotkeys回调中未同步返回最新值问题

AI 小北

2026-9-28

问题原因

你遇到的是典型的React闭包陷阱问题：

useHotkeys 绑定回调函数时，会捕获当前渲染闭包中的变量值。你没有给 useHotkeys 传入依赖项，因此回调始终引用首次渲染时的旧 modeData，不会随Redux状态更新自动刷新。
useEffect 可以正常打印最新值，是因为你显式将 modeData 加入了依赖数组，每次 modeData 变化时都会重新执行，拿到的是当前最新的状态。

解决方案

方案1：给useHotkeys添加依赖数组

useHotkeys 支持第四个参数作为依赖项，把用到的modeData加入依赖即可，每次modeData更新时回调会自动重建，拿到最新状态：

// 第三个参数是配置项，不需要的话传空对象即可
useHotkeys("ctrl+l", () => handler("Clone"), {}, [modeData]);

方案2：用useRef存储最新状态（不需要修改useHotkeys依赖）

如果不想频繁重建hotkeys监听，可以用ref缓存最新的modeData，避免闭包问题：

const modeData = useSelector((state) => state.mode.modeData);
// 新增ref缓存最新值
const modeDataRef = useRef(modeData);
// 每次modeData更新时同步到ref
useEffect(() => {
  modeDataRef.current = modeData;
}, [modeData]);

const handler = (id) => {
  // 从ref读最新值，永远不会过时
  const isActive = modeDataRef.current.find((x) => x.id === id).active;
  console.log(modeDataRef.current);
  dispatch(modeDataIncrement(id));
};

// 这里不需要加依赖了
useHotkeys("ctrl+l", () => handler("Clone"));