Reactjs 为什么useEffect（）在从套接字接收数据后似乎会重置我的本地状态？

我有一个简单的react组件，它通过SocketIO发送和接收消息。我的州钩看起来像这样

 const [newMessage, createMessage] = useState('');
 const [messages, setMessage] = useState([]);
 const [isConnected, setConnection] = useState(false);

其思想是，用户可以通过套接字编写和发送消息，然后再接收回消息。用户在文本区域中输入一些文本。消息的内容保存到“newMessage”本地状态变量中（如有必要，请参见下面的实现详细信息），然后用户通过套接字发送新消息

const sendMessage = () => {
    const currentMessage = {...newMessage}; //reduced for the sake of brevity

    socket.emit('message', currentMessage);
    createMessage('');
  };


const composeMessage = (
    <>
      <div>
        <textarea rows="2" cols="28" placeholder="Chat Message" onKeyDown={(e) => handleKeyDown(e)} onChange={(e) => createMessage(e.currentTarget.value)} value={newMessage} />
      </div>
      <div>
        <button onClick={sendMessage}><i className="ra ra-horn-call" /></button>
      </div>
    </>
  );

---

从您的代码中，我认为useEffect将运行并进行多个订阅，以便在每次消息和connectionState发生更改时，在每次渲染时侦听每条消息。这是因为只要状态发生更改，react组件就会呈现。由于websocket连接和侦听器可能被视为副作用，因此必须实现一个返回回调，以便在组件卸载时处理它们

假设您的所有websocket处理和聊天消息逻辑都在一个react组件中，您可能只需要在装载后创建web套接字连接和侦听器，并提供一个返回调用来处理卸载，例如在执行页面刷新时，或者组件依赖于可能触发重新渲染的父状态：

 useEffect(() => {
            socket.connect();
            socket.on('connect', () => {
                console.log('socket connected:', socket.connected);
            });
            socket.on('message',...);
        }
        return () => {
            console.log('websocket unmounting!!!!!');
            socket.off();
            socket.disconnect();

        };
    }, []);

---

嘿，谢谢你的回复-我将尝试卸载-套接字实际上可以跨多个组件使用，但我想我可能可以摆脱这个侦听器。如果结果有效，我会发布的哦，我明白了。在这种情况下，请记住在加载连接的组件上卸载连接。

useffect（（）=>{socket.on（'message'），（message）=>{const-nextState=messages.slice（）；nextState.push（message）；setMessage（nextState）；}；return（）=>socket.off（'message'）；}，[messages]）成功了
 useEffect(() => {
            socket.connect();
            socket.on('connect', () => {
                console.log('socket connected:', socket.connected);
            });
            socket.on('message',...);
        }
        return () => {
            console.log('websocket unmounting!!!!!');
            socket.off();
            socket.disconnect();

        };
    }, []);