Question

我在一个应用程序中工作，我正在接收抛出 socketio 的消息。我创建了一个组件，每次我从 socketio 收到一条消息时，我都会用该消息渲染一张卡片。这是有效的，问题是如果我卸载组件，一旦我再次安装它，我就可以看到以前的组件和新的组件，但是我无法保留组件卸载时出现的组件.实现这一目标的正确方法是什么？

我想我需要从组件中取出套接字连接，因为我想保留会话期间收到的所有消息

export default function MessagePage() {
  const [message, setMessage] = useState([]);
  useEffect(() => {
    socket.on("message", (messageSocket) => {
      let mess = JSON.parse(messageSocket);
      setMessage(mess);
    });
  }, [])

  return <Message message={message} />
}

let messageCollection = [];

export default function Message({ message }) {
  const [messageState, setMessageState] = useState([]);

  messageCollection.unshift(message);
  useEffect(() => {
    setMessageState(messageCollection);
  }, [message])

  return (
    <>
      {messageState.map(mes => (
          <Message
            ...
          />
      ))}
    </>
  );
}

我想我需要做一些事情，比如当用户在不同的页面时将消息保存在一个数组中，但我认为我仍然会遇到渲染那些已保存的和每隔几次到达的问题来自 socketio 的秒数。

在组件挂载和卸载时更新组件以与 socketio 反应

0 个答案: