在不丢失在UseEffect中呈现的消息的情况下隐藏聊天

import React, { useState, useEffect } from 'react';

const ChatComponent = () => {
  const [showChat, setShowChat] = useState(true);
  const messages = ['Message 1', 'Message 2', 'Message 3'];

  useEffect(() => {
    // Render chat messages
    if (showChat) {
      messages.forEach((message) => {
        console.log(message);
      });
    }
  }, [showChat]);

  const hideChat = () => {
    setShowChat(false);
  };

  return (
    <div>
      {showChat && (
        <div>
          {/* Render chat messages */}
          {messages.map((message, index) => (
            <div key={index}>{message}</div>
          ))}
        </div>
      )}
      <button onClick={hideChat}>Hide Chat</button>
    </div>
  );
};

export default ChatComponent;