React JS中Socket.IO客户端事件触发两次问题排查求助

• 重复创建Socket实例
  检查src/socket.ts是否存在多次初始化Socket的情况，比如在多个组件里重复调用io()创建连接，导致多个实例同时监听事件。
  解决：把Socket做成单例，在socket.ts里创建唯一实例再导出，示例：

  // src/socket.ts
  import { io, Socket } from 'socket.io-client';
  
  // 只初始化一次
  const socketInstance: Socket = io('你的服务器地址', {
    // 你的配置项
  });
  
  export default socketInstance;
  

• 事件监听重复绑定
  看MainLayout里的useEffect有没有正确清理监听，或者依赖项设置不对，导致每次组件渲染都重新绑事件。
  解决：在useEffect的返回函数里移除对应事件监听，同时把依赖项设对，示例：

  useEffect(() => {
    const handleMyEvent = (data) => {
      // 处理事件逻辑
    };
    socket.on('my-event', handleMyEvent);
  
    // 组件卸载时移除监听
    return () => {
      socket.off('my-event', handleMyEvent);
    };
  }, [socket]);
  

• React严格模式的影响
  开发环境下React Strict Mode会让组件渲染两次，可能导致事件被绑两次。
  解决：可以暂时关闭Strict Mode验证，或者确保监听在清理函数里正确移除，避免重复触发。

• 组件重复挂载
  检查MainLayout是不是被多次挂载了，比如路由配置错误、父组件状态变化导致反复挂载卸载。
  解决：排查路由和父组件逻辑，确保MainLayout只挂载一次。

内容的提问来源于stack exchange，提问作者opu