ReactJS 绑定keyup事件后单次按空格键触发多次问题求助

你给出的事件监听逻辑本身没有问题，单次按键触发几十次回调的常见原因和对应解决方法如下：

• **事件监听器重复绑定（90%以上的场景都是这个问题：如果addEventListener这段绑定代码被执行了多次，比如写在了组件渲染函数、重复调用的初始化方法、路由切换回调里，每执行一次就给document新增一个keyup监听器，单次按键会触发所有绑定的回调执行，自然会出现几十次打印的情况。
  修复方法：
  把匿名回调提取为具名函数，绑定前先移除旧的监听器，避免重复绑定：

  // 提取为具名函数
  function handleSpaceKeyup(e) {
      if(level === 1){
        if(e.code === "Space") {
          console.log('space press');
          click1();
        }
      }
  }
  // 先移除再绑定，避免重复注册
  document.removeEventListener("keyup", handleSpaceKeyup);
  document.addEventListener("keyup", handleSpaceKeyup);
  

  如果是单页应用场景，还要在组件卸载、页面离开的生命周期钩子中主动移除监听器，避免残留的监听器继续响应事件。
• 检查click1函数内部是否存在再次绑定keyup事件、修改level变量的逻辑，避免副作用导致重复触发。
• 可以在回调第一行添加e.stopImmediatePropagation()测试，如果加了之后只打印一次，即可确认是重复绑定问题。
• 在addEventListener行添加打印日志，确认绑定逻辑的执行次数，日志条数就是你实际绑定的监听器数量。

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