订阅套接字时，变量的状态为空。更新状态后，更新后不使用状态

Question

我试图连接到一个套接字端点，每当用户来回发送消息时，它都会发送一个JSON对象。

我正在连接到套接字并订阅一个主题。每当收到消息时，它都需要将对象添加到状态。因为我使用useEffect连接套接字，所以首先调用它，然后使用空状态订阅套接字。因此，每当收到消息时，就会将其添加到空数组中，从而只产生一个对象。

这是我的密码

套接字代码

const [chatData,setChatData] = useState([]);

  function connect() {
    var socket = new SockJS(""); //I've connected to my backend socket
    console.log(chatData);
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      isConnected = true;
      console.log("Connected: " + frame);
      stompClient.subscribe(
        "/topic/oneToOneChat/" + user.id,
        function (message) {
          const m = JSON.stringify(message.body);
          const socketMessage = JSON.parse(JSON.parse(m));
          chatData.unshift(socketMessage); //Adding the object to the top of the array
          setChatData([...chatData]); //This is adding the object to the empty array
        }
      );
      stompClient.subscribe("/topic/oneToOneChat/" + id, function (message) {
        const m = JSON.stringify(message.body);
        const socketMessage = JSON.parse(JSON.parse(m));
        chatData.unshift(socketMessage);
        setChatData([...chatData]);
      });
      stompClient.subscribe(
        "/topic/deleteOneToOneChat/" + id,
        function (message) {
          const m = JSON.stringify(message.body);
          const socketMessage = JSON.parse(JSON.parse(m));
          deleteMessageFromChatData(socketMessage.id);
        }
      );
      stompClient.subscribe(
        "/topic/deleteOneToOneChat/" + user.id,
        function (message) {
          const m = JSON.stringify(message.body);
          const socketMessage = JSON.parse(JSON.parse(m));
          deleteMessageFromChatData(socketMessage.id);
        }
      );
    });
  }

 useEffect(() => {
     connect();
 }, [chatData]);

chatData是我更新对象数组的状态。更新后，所有聊天都显示在我的屏幕上。但是，当我发送或接收消息时，套接字将消息对象添加到chatData并删除所有以前的消息。因为它是附加到空的chatData。

Answer 1

我通过在套接字订阅中添加以下行来解决这个问题

setChatData((chats) => [socketMessage,...chats])