ReactJS 和 Socket.io：从 websocket 服务器接收到新消息后，状态被重置为初始值

Question

我使用 reactJS 和 socket.io 为 webSocket 创建了一个简单的聊天应用程序，但是当我从服务器收到一条新消息以将其添加到消息数组状态时，被重置为初始值，它是一个空数组：

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";

let socket;

export default () => {
  const [messages,setMessages]=useState([]);

  useEffect(() => {
    socket = socketIOClient("https://localhost:5000");;
    
    socket.on("resp-chat-user",  data => {
        setMessages([{
            message:data.message,
          }]);;
    })
    return () => socket.close();  
  }, []);


  const SendMessage=(msg)=>{
    if(msg && msg!="")
    {
      socket.emit("req-chat-user", {
        message:msg,
        to: SOCKET_ID
      });
      setMessages([...messages,{
        message:msg
      }])
    }
  }

  return (
      <>
    <ul>
        {messages.map(msg=>(
            <li>{msg}</li>
        ))}
    </ul>
    <button type="submit" onClick={()=>SendMessage("HOLA")}>send</button>
    </>
  );
};

Answer 1

我在套接字监听器中更新状态的方式是错误的，我应该使用：

   setMessages(messages => [ ...messages, {
      type:"other",
      message:data.message,
    } ]);

在

  setMessages([ ...messages, {
      type:"other",
      message:data.message,
    } ]);