React键盘快捷键触发两次问题求助（附代码）

问题根源 #

你的代码中，useEffect的依赖数组包含selectedRowIndex、explorerContent等变量，每当这些值变化时，都会重新创建handleKeyDown函数并绑定新的keydown事件监听器。但由于每次生成的handleKeyDown都是新的函数引用，removeEventListener无法匹配并移除旧的监听器，导致多个监听器同时存在，最终触发两次逻辑。

修复方案 #

1. 用useCallback稳定事件处理函数引用 #

通过useCallback包裹handleKeyDown，确保只有当依赖项变化时才生成新的函数，这样removeEventListener能正确移除旧监听器：

import { useEffect, useCallback } from 'react';

// 组件内逻辑
useEffect(() => {
  const handleKeyDown = useCallback((e) => {
    // 可选：仅允许目标div内触发
    if (!e.target.closest('.your-target-div')) return;

    if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
      e.preventDefault();
      if (selectedRowIndex !== null && explorerContent[selectedRowIndex]) {
        handleCopy(explorerContent[selectedRowIndex]);
      } else {
        console.warn("No item selected to copy.");
      }
    } else if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
      e.preventDefault();
      handlePasteWithConflictResolution();
    }
  }, [selectedRowIndex, explorerContent, handleCopy, handlePasteWithConflictResolution]);

  window.addEventListener('keydown', handleKeyDown);
  return () => {
    window.removeEventListener('keydown', handleKeyDown);
  };
}, [handleKeyDown]);

2. 限制事件触发范围（可选） #

如果只需要在特定div内响应快捷键，添加e.target.closest判断，避免全局范围内的事件冒泡导致重复触发。

3. 调整preventDefault的位置 #

将e.preventDefault()移到对应快捷键的分支内，不要放在函数最开头，避免干扰浏览器其他默认快捷键功能。

4. 校验依赖完整性 #

确保useCallback的依赖数组包含所有用到的内部函数和状态，避免闭包导致的旧值引用问题。

额外排查点 #

• 检查是否有父组件或其他代码也绑定了keydown事件，导致事件冒泡触发多次。
• 可以在绑定/移除监听器时添加日志，确认是否每次都正确清理：

window.addEventListener('keydown', handleKeyDown);
console.log('监听器已绑定');
return () => {
  window.removeEventListener('keydown', handleKeyDown);
  console.log('监听器已移除');
};

内容的提问来源于stack exchange，提问作者Devil's Dream