在 react 中使用 socket.io 时，若在事件处理函数（如 `onclick`）内反复调用 `socket.on()`，会导致监听器不断叠加，造成多次响应同一事件（如重复弹窗）。正确做法是将监听器移至 `useeffect` 中并配合清理函数 `socket.off()`，确保组件卸载时自动解绑。
问题根源在于：每次点击“Join”按钮都会执行 playerJoin()，而该函数内部直接调用 socket.on("game-found-status", ...) —— 这并非注册一次监听器，而是每次调用都新增一个监听器。即使组件未重新挂载，这些监听器会持续累积，导致后续收到 "game-found-status" 消息时，所有已注册的回调都被依次触发（1次 → 2次 → 3次…），从而出现“弹窗数量递增”的现象。
✅ 正确解决方案：将事件监听逻辑从 playerJoin 中剥离，统一交由 useEffect 管理，并在组件卸载时主动清除：
useEffect(() => {
const handleGameFoundStatus = (gameFound: boolean) => {
if (gameFound) {
navigate("/player/lobby");
} else {
alert("No game found with this pin.");
}
};
socket.on("game-found-status", handleGameFoundStatus);
// 清理函数：组件卸载或 effect 重运行前自动解绑
return () => {
socket.off("game-found-status", handleGameFoundStatus);
};
}, [navigate]); // 依赖项中包含 navigate，确保引用最新⚠️ 注意事项：
- 不要在事件处理器中注册监听器：socket.on() 应视为“订阅行为”，适合在生命周期初始化阶段（useEffect）执行，而非用户交互瞬间。
- 必须显式传入回调引用给 socket.off()：仅写 socket.off("game-found-status") 可能无法精准移除，推荐使用具名函数或 useCallback 包裹回调，确保 on 与 off 使用同一引用。
- 服务端响应需幂等设计：前端虽已防重复监听，但仍建议后端对 "player-join" 请求做幂等校验（如限制单次连接只响应一次），避免无效消息广播。
- 若需支持多次 Join 尝试（如修改 PIN 后重试），可保留监听器长期有效，但 playerJoin() 应仅负责 emit，不干预监听逻辑。
总结：React 的函数组件每次渲染都会生成新函数实例，而 Socket.IO 的 on 方法不具备自动去重机制。唯有借助 useEffect 的依赖控制与清理机制，才能实现监听器的“单例注册 + 自动销毁”，从根本上杜绝重复响应问题。
