React中removeEventListener无法移除，按键选按钮功能遇阻求助

我完全懂你的困惑——这个问题的核心在于你每次调用eventHandler都会生成一个全新的函数引用，导致removeEventListener找不到对应的绑定，而且给每个卡片都绑定一次keypress事件也会造成不必要的性能浪费。

咱们换个思路，不需要提前给每个卡片绑定单独的事件处理器，而是只绑定一个全局的按键处理函数，在函数内部根据按键去匹配对应的卡片。这样既解决了引用不一致的问题，也简化了逻辑。

修改后的代码示例 #

const d = useDispatch(); 
const s = useSelector(select); 
const [selected, setSelected] = useState(s); 

// 用useCallback缓存函数引用，避免每次渲染生成新函数
const handleKeyPress = useCallback((e) => {
  // 遍历cards，找到与当前按键匹配的卡片
  const matchedCard = cards.find((card, i) => alphabet.indexOf(e.key) === i);
  if (matchedCard) {
    setSelected(matchedCard.key);
    d(set(matchedCard.key));
  }
}, [cards, alphabet, d, set]); // 依赖项变化时才更新函数引用

useEffect(() => {
  // 只绑定一次全局按键事件
  window.addEventListener("keypress", handleKeyPress, false);
  
  // 移除时直接使用同一个函数引用
  return () => {
    window.removeEventListener("keypress", handleKeyPress, false);
  };
}, [handleKeyPress]); // 依赖handleKeyPress，确保引用更新时重新绑定

关键修改点说明 #

1. 用useCallback稳定函数引用：
   • useCallback会缓存函数实例，只有当依赖项（cards、alphabet等）变化时才会生成新函数，这样移除监听器时能精准匹配到对应的引用。
2. 单一监听器代替多绑定：
   • 不再给每个卡片单独绑定事件，而是在一个函数里统一处理按键匹配，避免重复绑定的冗余问题，也更高效。
3. 正确的依赖项管理：
   • 在useEffect的依赖数组中加入handleKeyPress，确保当函数引用更新时，旧的监听器会被移除，新的会被添加，避免内存泄漏。

为什么原有写法会失败？ #

• 你在cards.map里每次调用eventHandler(card, i, ...)都会创建一个新的匿名函数，导致window上绑定了N个（卡片数量）keypress事件。
• 而移除时你传入的eventHandler是未调用的函数本身，和之前绑定的那些匿名函数引用完全不一致，所以根本无法移除任何一个绑定的事件。

这样调整后，就能实现按下A/B键选中对应按钮的功能，同时也能正确清理事件监听器啦。

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