使用TypeScript+Socket.io开发实时应用调用emit出现空指针错误

报错诱因 #

• 你初始化socket状态时默认值设为了null，负责初始化socket实例的第一个useEffect，需要在组件挂载完成后才会执行赋值，而React的状态更新本身是异步操作
• 依赖socket和user的第二个useEffect，在组件首次渲染阶段就会触发执行，此时socket还未完成赋值，仍然是null，调用null.emit自然就会抛出空指针错误

解决方案 #

方案1：添加空值判断（最快速修复） #

调用emit方法前先校验socket是否存在即可：

useEffect(()=>{
  if(socket) {
    socket.emit("newUser", user);
  }
},[socket,user])

方案2：调整状态初始化逻辑，避免初始值为null #

直接把socket实例的初始化放在状态声明阶段，不需要额外在useEffect里赋值，还能避免重复实例化的问题：

// 直接初始化，可删除原来给socket赋值的useEffect
import { type Socket, io } from "socket.io-client"
const [socket, setSocket] = useState<Socket | null>(io("http://localhost:5000"))

这里把泛型从any替换为socket.io-client导出的Socket类型，更符合TypeScript的类型规范，能获得完整的类型提示

方案3：补充连接清理逻辑（优化项） #

避免组件卸载后socket连接残留，同时保证实例创建的时序正确：

useEffect(()=>{
  const socketInstance = io("http://localhost:5000");
  setSocket(socketInstance);
  // 组件卸载时自动关闭连接
  return () => {
    socketInstance.disconnect();
  }
},[])

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