ReactJS中window.addEventListener()多次触发问题求助

你遇到的问题是重复绑定了键盘事件监听器：因为你的useEffect依赖了isPlaying状态，每次isPlaying变化时，这个useEffect都会重新执行，给window添加一个新的keydown监听器，但旧的监听器并没有被移除。这样每次按空格键时，所有已绑定的监听器都会触发，导致日志数量越来越多。

另外你的代码里只更新了isPlaying状态，没有实际控制音频元素的播放/暂停，这也是完整功能需要补充的点。

修复方案1：添加清理函数移除监听器 #

在useEffect中返回一个清理函数，每次组件重新渲染（或卸载）时移除对应的监听器，避免重复绑定：

import { useState, useEffect, useRef } from 'react';

function MusicPlayer() {
  const [isPlaying, setIsPlaying] = useState(true);
  // 用useRef获取音频元素，比直接document.getElementById更符合React规范
  const audioPlayerRef = useRef(null);

  useEffect(() => {
    function togglePlayPause(e) {
      if (e.code === "Space") {
        e.preventDefault();
        // 先操作音频元素，再更新状态
        if (isPlaying) {
          audioPlayerRef.current.pause();
          console.log("Song paused");
          setIsPlaying(false);
        } else {
          audioPlayerRef.current.play();
          console.log("Song playing");
          setIsPlaying(true);
        }
      }
    }

    window.addEventListener("keydown", togglePlayPause);
    
    // 清理函数：移除当前绑定的监听器
    return () => {
      window.removeEventListener("keydown", togglePlayPause);
    };
  }, [isPlaying]); // 依赖isPlaying，因为函数内部用到了这个状态

  return (
    <div>
      <audio ref={audioPlayerRef} id="audioPlayer" src="your-audio-source.mp3" />
      {/* 其他播放器UI */}
    </div>
  );
}

修复方案2：单次绑定优化（推荐） #

如果不想每次状态变化都解绑/绑定监听器，可以用useRef同步状态的最新值，让useEffect只执行一次：

import { useState, useEffect, useRef } from 'react';

function MusicPlayer() {
  const [isPlaying, setIsPlaying] = useState(true);
  const audioPlayerRef = useRef(null);
  // 用ref存储最新的isPlaying状态，避免在事件处理函数中捕获旧的状态值
  const isPlayingRef = useRef(isPlaying);

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

  useEffect(() => {
    function togglePlayPause(e) {
      if (e.code === "Space") {
        e.preventDefault();
        const currentState = isPlayingRef.current;
        if (currentState) {
          audioPlayerRef.current.pause();
          console.log("Song paused");
          setIsPlaying(false);
        } else {
          audioPlayerRef.current.play();
          console.log("Song playing");
          setIsPlaying(true);
        }
      }
    }

    window.addEventListener("keydown", togglePlayPause);
    return () => {
      window.removeEventListener("keydown", togglePlayPause);
    };
  }, []); // 空依赖数组，只绑定一次监听器

  return (
    <div>
      <audio ref={audioPlayerRef} id="audioPlayer" src="your-audio-source.mp3" />
    </div>
  );
}

关键说明 #

• 每次添加全局事件监听器后，必须在组件卸载或重新渲染时移除它，这是React中处理全局事件的标准做法。
• 使用useRef获取DOM元素是React推荐的方式，比直接调用document.getElementById更可靠，尤其是在组件重新渲染时。
• 方案2的优势是只绑定一次监听器，减少了不必要的DOM操作，性能更优。

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