TypeError：无法读取 null 的属性（读取“发射”）

Posted 2023-03-07

【中文标题】TypeError：无法读取 null 的属性（读取“发射”）

【英文标题】：TypeError: Cannot read properties of null (reading 'emit')

【发布时间】：2022-01-16 13:52:10

【问题描述】：

import  io  from "socket.io-client";
import  useState, useEffect  from "react";

const Game = () => 

  const [socket, setSocket] = useState(null);
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");

  useEffect(() => 
    setSocket(io(process.env.REACT_APP_BASE_URL));

    return () => 
      socket.emit("disconnect");
    ;
  , [socket]);

  const sendMessage = () => 
    socket.emit("room1",  name, room );
    socket.off();
  ;

  return (
    ...
  );
;

export default Game;

大家好。如标题所示，我收到此错误。如果我在 useEffect 依赖项中删除 socket，我不会再收到此错误，但这次我收到 React Hook useEffect has a missing dependency: 'socket'. Either include it or remove the dependency array react-hooks/exhaustive-deps 错误。

【问题讨论】：

socket 将暂时为空，因此快速解决方法是将socket.emit("disconnect") 更改为socket?.emit("disconnect")。

如果我这样做，我会得到Error: "disconnect" is a reserved event name

嗯，这是一个单独的问题——但它没有抛出空指针异常，这就是你的帖子的内容。检查 socket.io-client 的文档以解决关于“断开连接”的第二个问题。

【参考方案1】：

你忘了定义套接字，现在它只是未定义。

useEffect(() => 
    const socket = io(process.env.REACT_APP_BASE_URL);
    setSocket(socket);

    return () => 
      socket.emit("disconnect");
    ;
  , [socket]);

而且你需要小心你的函数，因为你的发送消息函数将有未定义的套接字。

编辑：所以我注意到您正在使用状态，您可以稍作更改以使其也适用于状态

useEffect(() => 
    setSocket(await io(process.env.REACT_APP_BASE_URL));

    return () => 
      socket.emit("disconnect");
    ;
  , [socket]);

编辑 2：你应该等待你的套接字连接