如何使用socket.io进行简单的消息传递并反应useEffect（）

Question

我想使用socket.io进行简单的消息传递并响应useEffect()进行设置，但是我不知道如何从useEffect内部正确管理/更新状态。 这是我的代码：

  function App() {
    const [messages, setMessages] = useState([{ type: "system", text: "Please stay nice!" }]);
    useEffect(() => {
      socket.current.on("messageSent", (data) => {
        setMessages([...messages, { type: "you", text: data.message }]);
      });

      socket.current.on("receiveMessage", (data) => {
        setMessages([...messages, { type: "partner", text: data.message }]);
      });
    }, []);

    return (
      <>
        <span className="container">
          <Chat messages={messages} />
        </span>
      </>
    );
  }

关键是我不想重新运行useEffect()，我希望它在开始设置套接字回调时就运行一次。 现在，当我尝试从useEffect内部访问消息时，我只得到了一个起始值[{ type: "system", text: "Please stay nice!" }]，而setMessages并没有刷新父组件的props，子组件只能访问此起始值[{ type: "system", text: "Please stay nice!" }]。