Socket.io与React连接异常：PC端无数据移动端正常问题排查

• 控制台打印socketInstance和socketInstance.connected结果不一致
• 页面刷新后，移动端小屏幕可正常获取数据，但PC端大屏幕无法获取，推测是移动端渲染次数更多才让功能正常

相关代码 #

App.tsx #

useEffect(() => {
    user && setSocketConnection(user?.id)
}, [user])

socketInstance文件 #

export let socketInstance: Socket

export const setSocketConnection = (userId: number) => {
    socketInstance = io(`${BASE_URL_SOCKET}`, {query: {userId}})
}

自定义Hook useSocketConnect #

const useSocketConnect = () => {
    const [isConnected, setIsConnected] = useState(socketInstance?.connected)
    console.log(socketInstance)
    console.log(socketInstance?.connected)
    useEffect(() => {
        socketInstance?.on('connect', () => {
            setIsConnected(true)
        })
        socketInstance?.on('disconnect', () => {
            setIsConnected(false)
        })
        return () => {
            socketInstance?.off('connect')
            socketInstance?.off('disconnect')
        }
    }, [])
    return {isConnected}
}

export default useSocketConnect

问题分析与修复方案 #

核心问题 #

1. 初始状态赋值时机错误：useState(socketInstance?.connected)在组件初始化时同步执行，此时socketInstance可能还未创建（比如user未加载完成，setSocketConnection还没调用），或者Socket连接处于pending状态，connected属性未更新为true，导致初始状态不准确。
2. Hook依赖缺失：useEffect依赖数组为空，当socketInstance后续被创建时，Hook不会重新订阅连接事件，状态无法同步更新。
3. 跨端渲染差异：移动端渲染次数多刚好让socketInstance在Hook初始化前被创建，侥幸命中正确状态，但这是不可靠的偶发情况。

修复步骤 #

1. 修正自定义Hook的状态与依赖
   将socketInstance加入useEffect依赖数组，确保实例创建后重新订阅事件；初始状态设为false，避免无效初始值：

   const useSocketConnect = () => {
       const [isConnected, setIsConnected] = useState(false)
   
       useEffect(() => {
           if (!socketInstance) return
   
           // 初始化时同步当前连接状态
           setIsConnected(socketInstance.connected)
   
           // 绑定事件处理函数（避免匿名函数导致off失效）
           const onConnect = () => setIsConnected(true)
           const onDisconnect = () => setIsConnected(false)
   
           socketInstance.on('connect', onConnect)
           socketInstance.on('disconnect', onDisconnect)
   
           return () => {
               socketInstance.off('connect', onConnect)
               socketInstance.off('disconnect', onDisconnect)
           }
       }, [socketInstance])
   
       return {isConnected}
   }
   

2. 防止重复创建Socket实例
   在setSocketConnection中增加判断，避免多次调用重复创建实例：

   export const setSocketConnection = (userId: number) => {
       if (socketInstance?.connected) return
       socketInstance = io(`${BASE_URL_SOCKET}`, {query: {userId}})
   }
   

3. 确保实例就绪后再使用
   在使用useSocketConnect的组件中，先判断user和连接状态，避免读取无效数据：

   const { isConnected } = useSocketConnect()
   
   if (!user || !isConnected) {
       return <div>加载中...</div>
   }
   
   return <YourBusinessComponent />
   

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