在 react 中为 socket.io 事件（如 `"game-found-status"`）动态添加监听器时，若未及时清理，会导致多次点击后监听器重复注册，引发重复弹窗、状态错乱等问题；正确做法是使用 `useeffect` 声明监听逻辑，并在组件卸载时通过 `socket.off()` 清理。
问题根源在于：当前代码中 socket.on("game-found-status", ...) 被写在普通事件处理函数 playerJoin() 内部——每次点击按钮都会新增一个监听器，但旧监听器从未被移除。即使 playerJoin 本身只执行一次，Socket.IO 的事件总线会累积多个相同事件的回调，导致 alert() 被反复触发（1次 → 2次 → 3次…）。
✅ 正确解法是将事件监听逻辑声明式地托管给 React 生命周期，即使用 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);
// 清理：组件卸载或依赖变更时移除监听器
return () => {
socket.off("game-found-status", handleGameFoundStatus);
};
}, [navigate]); // 依赖项需包含所有闭包中使用的变量（如 navigate）⚠️ 注意事项：
- 必须传递相同的回调引用给 socket.off()，因此推荐将处理函数提取为具名常量（如 handleGameFoundStatus），而非内联箭头函数；
- 若 socket 是全局或模块级实例且不随组件变化，通常无需将其加入依赖数组；但需确保其在组件挂载时已就绪；
- 不要在事件处理器（如 onClick）中调用 socket.on/socket.off —— 这违背了 React 的响应式设计原则，易引发内存泄漏和竞态问题；
- 对于一次性响应（如本次“加入游戏”的结果），也可考虑使用 socket.once() 替代 socket.on()，它自动在首次触发后解绑，但需注意服务端是否支持对应语义。
? 进阶建议：
为提升健壮性，可结合 AbortController 或自定义 Hook（如 useSocketEvent）封装监听逻辑，统一处理连接状态、重试与错误边界。同时，用 toast 等非阻塞提示替代 alert()，避免中断用户交互流程。
最终，事件监听应“声明在 useEffect 中，清理在 return 函数里”，这是 React + 实时通信场景下的关键实践准则。
