隐藏聊天而不会丢失它在 UseEffect 中呈现的消息答案

【问题标题】：Hide Chat Without losing the messages it is rendering in UseEffect隐藏聊天而不会丢失它在 UseEffect 中呈现的消息
【发布时间】：2021-03-09 12:50:39
【问题描述】：

我正在制作一个聊天应用程序。如果用户想要查看聊天，我将在其中提供一个切换按钮。聊天工作完全正常。但是切换按钮执行该组件的显示和隐藏选项。我面临的问题是当我隐藏聊天组件并再次切换它时。我把之前所有的聊天都放掉了，其他用户继续发送消息。

我想让聊天组件继续运行以获取新消息。我怎样才能做到这一点

{
 (!chatToggle) ? <Chat location={location} /> : null
}

聊天.js


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

//components 
import InfoBar from './RoomInfoBar/InfoBar'
import TypeMessage from './TypeMessage/TypeMessage'
import Messages from "./Messages/Messages";
import { useParams } from "react-router";



let socket;


function Chat({ location }) {
    
    const ENDPOINT = 'http://localhost:5000/';

    const [name, setName] = useState('');
    const [room, setRoom] = useState('');
    const [users, setUsers] = useState('');
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([]);

    // when using params 
    const { userName, roomId } = useParams();

    useEffect(() => {

        // const { name, room } = queryString.parse(location.search);
        socket = io.connect(ENDPOINT);
        setRoom(roomId);
        setName(userName);

        socket.emit('join-room', { name : userName, room : roomId }, (error) => {
            if (error) {
                alert(error);
            }
        })

        return (() => {
            console.log('I am lea')
            socket.emit('leave');
            socket.off();
        })
    }, [ENDPOINT, location.search]);
    console.log(messages)


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

        socket.on("roomData", ({ users }) => {
            setUsers(users);
        });
    }, []);

    const sendMessage = (e) => {
        e.preventDefault();
        if (message) {
            socket.emit('sendMessage', message, () => setMessage(''));
        }
    }

    return (
        <>
            <InfoBar room={room} />
            <Messages messages={messages} name={name} />
            <TypeMessage message={message} setMessage={setMessage} sendMessage={sendMessage} />
        </>
    )
}

export default Chat

【问题讨论】：

标签： javascript reactjs redux socket.io

【解决方案1】：

如果你想保持加载，不要让它为空。这将导致它被完全删除。相反，只需将此聊天组件包装在 div 中并使用 css 切换它的可见性。

将您的代码更新为：

<div className={!chatToggle ? "" : "hidden"}>
    <Chat location={location} />
</div>

并创建一个 CSS 类，如：

.hidden {
    display: none;
}

【讨论】：