在 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
                  
Game Pin
                  Join                    Click here to host a game                
     
   ); }

? 关键注意事项：

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

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