自定义Hook返回socket调用emit报错：Cannot read properties of undefined

常见原因及修复方案 #

• Hook未正确返回有效socket实例
  若socket是异步初始化（比如在useEffect中创建），初始状态大概率是undefined，直接调用emit就会触发报错。
  修复：给socket设置null初始值，调用前先做存在性校验：

  // 自定义Hook示例
  import { useEffect, useState } from 'react';
  import io from 'socket.io-client';
  
  export const useSocket = () => {
    const [socket, setSocket] = useState(null);
  
    useEffect(() => {
      const newSocket = io('你的socket服务地址');
      setSocket(newSocket);
  
      return () => newSocket.close();
    }, []);
  
    return socket;
  };
  
  // 首页使用方式
  const socket = useSocket();
  // 可选链调用避免报错
  socket?.emit('目标事件名', 传输数据);
  

• Hook调用违反React规则
  必须在函数组件的顶层调用自定义Hook，不能放在条件判断、循环或嵌套函数内，否则会导致状态异常，socket实例无法正常初始化。

• Socket连接初始化失败
  检查socket服务地址是否正确、后端服务是否启动、网络是否正常。可以在Hook中添加错误监听排查问题：

  useEffect(() => {
    const newSocket = io('你的socket服务地址');
    newSocket.on('connect_error', (err) => {
      console.error('Socket连接失败:', err);
    });
    setSocket(newSocket);
  
    return () => newSocket.close();
  }, []);
  

• 依赖项错误导致重复创建实例
  若useEffect的依赖数组设置不当，会重复创建socket实例，导致返回的实例不稳定。确保依赖数组为空（仅初始化一次），或根据业务需求添加正确的依赖项。

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