使用 Socket.io 重置反应状态答案

【问题标题】：React state resets with Socket.io使用 Socket.io 重置反应状态
【发布时间】：2020-11-28 06:31:47
【问题描述】：

我目前正在努力解决与 socket.io 和 React 有关的问题。每当调用 socket.on() 时，状态都会重置，并且之前的所有聊天数据都消失了。换句话说，每当用户收到一条消息时，“消息”状态就会被重置。

我在Socket.io resets React state? 上看到了类似的帖子，但我似乎无法对我的问题应用相同的解决方案。任何帮助将不胜感激！

function ChatComponent(props) {
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(socketioclient("*********"));
  function socket_joinRoom(room) {}

  function _onMessageUpdate(message) {
    setMessages([
      ...messages,
      {
        author: "them",
        type: "text",
        data: { text: message },
      },
    ]);
  }

  useEffect(() => {
    socket_joinRoom(parseInt(props.props[0], 10));

    socket.on("updateMessage", (message) => {
      //** When this is called, the state resets*
      console.log(messages);
      _onMessageUpdate(message);
    });
    return () => {
      socket.off("updateMessage");
      socket.disconnect();
    };
  }, []);

  function _onMessageWasSent(message) {
    setMessages([...messages, message]);
    socket.emit("sendMessage", message.data.text);
  }

  return (
    <div className="chatComponent" style={{ height: "100%" }}>
      <Launcher
        agentProfile={{
          teamName: `Ongoing: Room #${props.props[0]}`,
        }}
        onMessageWasSent={_onMessageWasSent}
        messageList={messages}
        isOpen={true}
        showEmoji
      />
    </div>
  );
}

【问题讨论】：

你可以试试useRef 吗？您可以简单地初始化数组并继续添加。 Refs 不会导致任何重新加载，因此您会很安全。此外，将数据写入 localStorage 也有助于在刷新之间保持持久性。
@Abhilash 在这种情况下我将如何使用“useRef”？消息需要是可变的
我的意思是您仍然需要您的状态来检测更改 n 刷新，但是将您的更新推送到 ref 以便您始终拥有旧数据和新数据。

标签： reactjs websocket socket.io

【解决方案1】：

首先你需要在它自己的useEffect中分离加入房间的逻辑

useEffect(()=>{
        socket_joinRoom(parseInt(props.props[0],10));
},[props.props[0]])

因为你要在另一个 useEffect 中监听收到的消息的变化所以你不需要每次收到新消息时都初始化加入逻辑

对于消息函数，它可以是另一个 useEffect 监听接收到的“消息”，如下面的代码

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

此 useEffect 将触发并监听更改并将新消息添加到以前的消息中

【讨论】：

理想的方式。具有依赖关系的效果。
感谢您的回复。状态不再重置。但是，useEffect 称为提交次数。换句话说，useEffect 在发送第二条消息时触发两次，在发送第三条消息时触发三次。我该如何解决这个问题？
您可以从第二个 useEffect 中删除 [messages] 作为依赖项，我已经在答案中修复了它