javascript - 在react中收到消息后，Websocket立即未定义

Question

我在react中使用websocket。这是该组件的代码:

import React, { useState, useEffect } from "react";

export default function Component(props) {
  const [socket, setSocket] = useState();

  const parseMessage = (msg) => {
    if (msg[0] !== "R") sendMessage("123"); // ignore the very first message from the socket. 
  };

  const sendMessage = (msg) => socket.send(msg); // error at this line

  useEffect(() => {
    const socket = new WebSocket("wss://ws.ifelse.io/");
    socket.addEventListener("message", ({ data }) => {
      if (socket) parseMessage(data);
    });
    setSocket(socket);
  }, []);

  const sendMsg = () => {
    socket.send("test");
  };

  return <button onClick={() => sendMsg("clicked")}>send msg</button>;
}

我收到此错误:TypeError:无法读取标记行处未定义的属性(读取“发送”)。 WebSocket 只是一个回显服务器，它会返回与您发送的内容相同的内容。

如果我将 socket.send 包装在 try-catch block 中，我仍然可以使用按钮从 WebSocket 发送和接收消息，但错误仍然发生在 中的该行发送消息。

很明显，套接字变量不是未定义的，因为我能够在错误发生之前和之后发送和接收消息。

所以我的问题是为什么套接字变量仅在收到消息后的短时间内未定义，以及解决此问题的方法是什么。

Answer 1

更好的解决方案是在外部初始化套接字

import React, { useState, useEffect } from "react";

const socket = new WebSocket("wss://ws.ifelse.io/")

export default function Component(props) {
  const ws = useRef(socket)
  
  useEffect(() => {
    ws.current?.addEventListener("message", ({ data }) => {
      parseMessage(data);
    });
    return () => {
      ws.current?.removeAllListeners()
    }
  }, [])

  const parseMessage = (msg) => {
    if (msg[0] !== "R") sendMessage("123"); // ignore the very first message from the socket. 
  };

  const sendMessage = (msg) => ws.current?.send(msg);


  const sendMsg = () => {
    ws.current?.send("test");
  };

  return <button onClick={() => sendMsg("clicked")}>send msg</button>;
}