React中AddEventListener仅含console.log时生效问题求助

问题根源 #

这是典型的React闭包陷阱导致的过时状态引用问题：

• 第一个useEffect依赖数组为空，仅在组件挂载时执行一次，此时handleShortcuts捕获的newPaperShortcut是初始的空函数() => {}。
• 后续通过setNewPaperShortcut更新状态时，第一个useEffect不会重新执行，事件监听里的handleShortcuts始终引用旧的newPaperShortcut值。
• console.log的存在只是偶然改变了执行时机（比如触发微任务延迟），让状态更新偶尔能赶上事件触发，这不是真正的解决方案，反而掩盖了根本问题。
• 无效的事件绑定/未正确移除监听，可能引发内存泄漏，最终导致应用崩溃、全局事件无法响应。

修复方案 #

方案1：添加状态依赖到useEffect

将newPaperShortcut加入第一个useEffect的依赖数组，状态更新时会重新注册事件监听，确保handleShortcuts始终引用最新的函数：

let [newPaperShortcut, setNewPaperShortcut] = useState(() => () => { });

useEffect(() => {
  const handleShortcuts = (event: KeyboardEvent) => {
    if (event.keyCode === N_KEY) {
      newPaperShortcut();
    }
  };
  window.addEventListener('keydown', handleShortcuts);

  return () => window.removeEventListener('keydown', handleShortcuts);
}, [newPaperShortcut]); // 新增状态依赖

// 另一处逻辑保持不变
useEffect(() => {
  setNewPaperShortcut(() => () => {
    console.log("RANDOMLY EXECUTED");
  });
}, []);

方案2：使用useRef保存最新函数引用

如果不想频繁注册/移除事件监听，可用useRef存储最新的函数引用，事件监听直接访问ref.current：

let [newPaperShortcut, setNewPaperShortcut] = useState(() => () => { });
const shortcutRef = useRef(newPaperShortcut);

// 同步状态到ref
useEffect(() => {
  shortcutRef.current = newPaperShortcut;
}, [newPaperShortcut]);

useEffect(() => {
  const handleShortcuts = (event: KeyboardEvent) => {
    if (event.keyCode === N_KEY) {
      shortcutRef.current(); // 访问最新的函数引用
    }
  };
  window.addEventListener('keydown', handleShortcuts);

  return () => window.removeEventListener('keydown', handleShortcuts);
}, []); // 依赖数组保持为空

// 另一处逻辑保持不变
useEffect(() => {
  setNewPaperShortcut(() => () => {
    console.log("RANDOMLY EXECUTED");
  });
}, []);

关于Context传递的说明 #

你通过React Context传递setNewPaperShortcut的做法完全可行——React的setState函数本身是稳定的，不会随组件渲染变化，深层组件可以安全地用它更新状态。

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