React中出现TypeError: Cannot read properties of undefined (reading 'on')求助

错误根源 #

你在Homepage组件中使用const { socket } = useSocket();解构获取socket，但useSocket返回的是SocketContext的直接值（即socket实例），并非包含socket属性的对象。这导致解构出的socket为undefined，调用socket.on时触发报错。

修复方案 #

方案1：直接获取socket实例（推荐）

修改Homepage中获取socket的代码，去掉解构：

// 原代码
const { socket } = useSocket();
// 修改后
const socket = useSocket();

方案2：保持解构写法（调整Context值格式）

如果你偏好解构语法，修改socket.jsx中SocketProvider的value为对象：

// socket.jsx中修改Provider部分
return (
  <SocketContext.Provider value={{ socket }}>
    {props.children}
  </SocketContext.Provider>
)

额外检查项 #

1. 确保组件被SocketProvider包裹
   你的Homepage必须嵌套在SocketProvider内部，否则useSocket会返回Context的初始值null，同样会触发错误。比如根组件结构：

   import { SocketProvider } from './providers/socket';
   import Homepage from './Home';
   
   function App() {
     return (
       <SocketProvider>
         <Homepage />
       </SocketProvider>
     );
   }
   

2. 添加空值校验（可选但推荐）
   在使用socket前增加空值判断，避免初始化阶段的潜在报错：

   // useEffect中
   useEffect(() => {
     if (!socket) return;
     socket.on('joined-room', handleRoomJoined);
     return () => {
       socket.off('joined-room', handleRoomJoined);
     }
   }, [handleRoomJoined, socket])
   
   // 加入房间的方法中
   const handleJoinRoom = () => {
     if (!socket || !email || !roomId) return;
     socket.emit("join-room", {emailId: email, roomId});
   };
   

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