在 react 中为 socket.io 事件重复绑定 `socket.on()` 会导致监听器不断累积，引发多次触发（如多次弹窗），需结合 `useeffect` 和清理函数确保监听器只注册一次且及时解绑。

问题根源在于：每次调用 playerJoin() 时都执行了 socket.on("game-found-status", ...)，而 Socket.IO 的 on() 方法不会自动覆盖已有监听器，而是叠加注册——第一次点击注册 1 个，第二次点击注册第 2 个，以此类推。因此，当服务端发出一次 "game-found-status" 事件时，所有已注册的监听器都会同步执行，导致 alert() 被反复调用（1 次、2 次、3 次……），尽管 playerJoin() 函数本身只执行了一次。

✅ 正确做法是：将事件监听逻辑从事件处理函数中移出，改用 useEffect 进行一次性声明式绑定，并在组件卸载时通过返回的清理函数调用 socket.off() 解绑。

以下是修复后的完整代码示例：

function Home() {
  const [input, setInput] = useState({
    displayName: "",
    pin: "",
  });
  const { displayName, pin } = input;
  const navigate = useNavigate();
  const socket = /* your initialized socket instance */;

  // ✅ 使用 useEffect 管理 socket 监听器生命周期
  useEffect(() => {
    const handleGameFoundStatus = (gameFound) => {
      if (gameFound) {
        navigate("/player/lobby");
      } else {
        alert("No game found with this pin.");
      }
    };

    socket.on("game-found-status", handleGameFoundStatus);

    // ? 清理：组件卸载时移除监听器（防止内存泄漏 & 重复触发）
    return () => {
      socket.off("game-found-status", handleGameFoundStatus);
    };
  }, [navigate, socket]); // 依赖项包含 socket 和 navigate，确保稳定性

  const playerJoin = () => {
    // ❌ 不再在此处绑定监听器
    socket.emit("player-join", displayName, pin);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInput((prev) => ({ ...prev, [name]: value }));
  };

  return (
    

      
Join a Game
      

        
Display Name

							

								
								

									萝卜简历
									
免费在线AI简历制作工具，帮助求职者轻松完成简历制作。
								
								下载 
							
						
        
        
Game Pin
        
        Join
        
          Click here to host a game
        
      
    
  );
}

? 关键注意事项：

• 必须传入相同的回调引用给 socket.off()：使用具名函数或 useCallback 包裹，避免匿名函数导致清理失效；
• 依赖数组不可遗漏 socket：若 socket 是动态创建或可能变化，需确保其稳定（例如用 useRef 缓存或在顶层初始化）；
• 不要在事件处理器中注册监听器：这违背 React 的响应式数据流原则，也极易引发竞态和副作用失控；
• 服务端应保证幂等性：即使客户端误发多次请求，服务端也应避免重复响应（如限制单次会话仅返回一次 "game-found-status"）。

通过该模式，你不仅解决了弹窗叠加问题，还使事件管理更符合 React 的生命周期语义，提升应用健壮性与可维护性。