ReactJS和Socket.io :收到websocket服务器发来的新消息后，状态重置为初始值

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

const socket = io('http://your-websocket-server.com');

function ChatRoom() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    socket.on('newMessage', (message) => {
      setMessages([...messages, message]);
    });

    return () => {
      socket.off('newMessage');
    };
  }, [messages]);

  const sendMessage = () => {
    socket.emit('sendMessage', newMessage);
    setNewMessage('');
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default ChatRoom;

import React, { memo } from 'react';

const MessageList = memo(({ messages }) => {
  return (
    <ul>
      {messages.map((message, index) => (
        <li key={index}>{message}</li>
      ))}
    </ul>
  );
});

export default MessageList;

useEffect(() => {
  const handleMessage = (message) => {
    setMessages((prevMessages) => [...prevMessages, message]);
  };

  socket.on('newMessage', handleMessage);

  return () => {
    socket.off('newMessage', handleMessage);
  };
}, []);