我在 React/NEXTjs 中的 useState 没有附加来自服务器的 socket.io 事件的结果，只是覆盖它

Question

使用的框架：Next.js、Socket.io、React

我正在制作一个简单的消息传递应用程序。我基本上只是发出某人键入的消息，将该消息发送到服务器，然后通过名为“接收聊天消息”的事件“广播”回来。我遇到的问题是，当在前端使用“receive-chat-message”处理响应时，[messages] 状态没有附加要显示的新消息，它只是覆盖状态。

我的目标是向服务器发送消息；服务器然后将消息发送回客户端。然后，我将从服务器发送的客户端上的新消息附加到客户端上的 [messages] 状态，然后呈现 [messages] 的状态。问题是它只是覆盖 [messages] 状态，而不是向其附加新消息。

向服务器发送消息的代码

const [message, setMessage] = useState("");

  const handleChange = (e) => {
    setMessage(e.target.value);
  };

  const submitMessage = async () => {
    // socket.io
    const socket = io();
    socket.emit("send-chat-message", message, user);
    setMessage("");
  };

前端代码

const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = io();
    socket.on("receive-chat-message", handleSetMessage);

    return () => socket.disconnect();
  }, []);

  const handleSetMessage = (data) => {
    /* data prop is the new message - it has a {message: "message", user: "name"} 
       sent from server.
       THIS IS THE PROBLEM IN THE CODE WHERE IT DOESN'T APPEND
       NEW MESSAGES TO THE [messages] STATE, IT JUST OVERWRITES
       THE CURRENT STATE WITH THE NEW MESSAGE. */

    setMessages([...messages, data]);
  };

后端代码

export default async function handler(req, res) {
    if (!res.socket.server.io) {
      const io = new Server(res.socket.server);
      res.socket.server.io = io;

      io.on("connection", async (socket) => {
        socket.on("send-chat-message", async (message, user) => {
          socket.broadcast.emit("recieve-chat-message", 
          {
            message,
            name: user && user.name,
          });
        });
      });
   }
 }

Answer 1

我通过以下功能方法设置消息解决了这个问题：

setMessages((messages) => [...messages, data]);

而不是：

setMessages([...messages, data])

我认为我们需要这个，因为我正在从 socket.io 侦听器中调用的函数更新状态，并且从未真正获取以前的状态；所以我不得不将它定向到以前的状态，然后合并这些值。

我在 React/NEXTjs 中的 useState 没有附加来自服务器的 socket.io 事件的结果，只是覆盖它

My useState in React/NEXTjs is not appending the result from a socket.io event from the server, just overwriting it

javascript

reactjs

websocket

socket.io

next.js