React+Flask Socket.IO切换房间后消息无法渲染问题求助

问题根源 #

你的代码存在两个核心问题：

1. Socket实例重复创建：组件内部直接声明const socket = io(...)，每次组件状态更新（比如切换房间触发重渲染）都会新建Socket连接，但只有第一次挂载时的Socket绑定了message和change监听事件，后续新建的Socket没有绑定监听，导致切换房间后收不到消息。
2. 监听事件未持久绑定：useEffect依赖为空数组，仅在组件首次挂载时执行一次，后续切换房间时不会重新绑定监听，而新创建的Socket实例完全没有监听逻辑。

解决方案 #

使用useRef保存Socket实例，确保整个组件生命周期内只有一个Socket连接，同时在组件挂载时一次性绑定监听事件（无需重复绑定）。

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';
import io from 'socket.io-client';

function ChatComponent(props) {
  // 用useRef保存Socket实例，避免重复创建
  const socketRef = useRef(null);

  const [texttmsg, setTextmsg] = useState([]);
  const [sender, setSender] = useState([]);
  const [input, setInput] = useState("");
  const [rooms, setRoomc] = useState("");
  const [loading, setLoading] = useState(false);

  const Message = (e) => {
    e.preventDefault();
    if(input.trim() !== ''){
      // 使用ref保存的Socket实例
      socketRef.current.emit('send', {
        room: rooms,
        message: input,
        user_id: props.id
      });
      setInput("");
    }
  };

  const joinRoom = (newRoom) => {
    if(rooms !== ""){
      socketRef.current.emit('leave', {
        room: rooms,
        user_id: props.id
      });
    }
    if(rooms !== newRoom){
      socketRef.current.emit('join', {
        room: newRoom,
        user_id: props.id
      });
    }
    setRoomc(newRoom);
    setTextmsg([]);
    setSender([]);
  };

  useEffect(() => {
    // 仅在组件首次挂载时创建Socket连接
    socketRef.current = io('//localhost:5000/', {
      transport: ['websocket'],
      cors: { origin: '//localhost:5000/' },
      extraHeaders: {"Auth": sessionStorage.getItem('access_token')}
    });

    // 定义监听回调函数，方便后续清理
    const handleMessage = (data) => {
      setTextmsg(prevTextmsg => [...prevTextmsg, data.msg]);
      setSender(prevSender => [...prevSender, data.sender]);
    };

    const handleChange = (data) => {
      setTextmsg(pastTextmsg => [...pastTextmsg, data.msg]);
    };

    // 绑定监听事件
    socketRef.current.on("message", handleMessage);
    socketRef.current.on("change", handleChange);

    // 组件卸载时清理Socket连接与监听
    return () => {
      socketRef.current.off("message", handleMessage);
      socketRef.current.off("change", handleChange);
      socketRef.current.disconnect();
    };
  }, []); // 空依赖确保仅执行一次

  // 渲染部分（保留原UI逻辑即可）
  return (
    // 你的聊天组件UI代码
  );
}

export default ChatComponent;

关键修改说明 #

• useRef保存Socket实例：避免组件每次重渲染都新建连接，保证始终使用同一个Socket与后端通信。
• 一次性绑定监听事件：在组件挂载时绑定message和change监听，后续切换房间时只需发送join/leave指令，Socket会留在对应房间接收消息，无需重新绑定监听。
• 完善清理逻辑：组件卸载时断开Socket连接并移除监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Izy G