在 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 (
<div id="home" className="component-container-middle">
<h1>Join a Game</h1>
<div className="game-input-info">
<p>Display Name</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11219" title="IBKR Investing with Permission Gate"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="IBKR Investing with Permission Gate" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11219" title="IBKR Investing with Permission Gate">IBKR Investing with Permission Gate</a>
<p>通过IB网关在Interactive Brokers上投资股票/ETF，使用与okx交易相同的人机确认环节，适用于用户请求检查时</p>
</div>
<a href="/xiazai/skill11219" title="IBKR Investing with Permission Gate" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<input
name="displayName"
value={displayName}
onChange={handleChange}
/>
<p>Game Pin</p>
<input name="pin" value={pin} onChange={handleChange} />
<button onClick={playerJoin}>Join</button>
<Link id="host-link" to="/host">
Click here to host a game
</Link>
</div>
</div>
);
}? 关键注意事项：
- 必须传入相同的回调引用给 socket.off()：使用具名函数或 useCallback 包裹，避免匿名函数导致清理失效；
- 依赖数组不可遗漏 socket：若 socket 是动态创建或可能变化，需确保其稳定（例如用 useRef 缓存或在顶层初始化）；
- 不要在事件处理器中注册监听器：这违背 React 的响应式数据流原则，也极易引发竞态和副作用失控；
- 服务端应保证幂等性：即使客户端误发多次请求，服务端也应避免重复响应（如限制单次会话仅返回一次 "game-found-status"）。
通过该模式，你不仅解决了弹窗叠加问题，还使事件管理更符合 React 的生命周期语义，提升应用健壮性与可维护性。
