useState 在 useEffect 和 socket.io 中未正确设置

Question

我有一个聊天应用程序，它通过 socket.io 发送聊天消息数据。状态数据未在我的 useEffect 内部设置。

  const [receivedMessage, setReceivedMessage] = useState(null);

  // Get the message from socket server
  useEffect(() => {
    socket.current.on("receive-message", (data) => {
      console.log("get received message", data);
      setReceivedMessage(data); //Issue is this setState
    });

  }, []);

  //Verify receivedMessage state changed
  useEffect(()=>{
    console.log("updated received message: ", receivedMessage)
  }, [receivedMessage])


  

`

我可以看到正在从套接字接收数据。这是控制台.log：

用于验证收到消息的 useEffect 永远不会执行。

Answer 1

将您的 setReceivedMessage 更新为此：

      setReceivedMessage((data) => (data));