Socket.io与Redux Toolkit不同步：接收消息时selectedChatUser为空

你的核心问题出在JavaScript闭包的特性上：当你在第一个useEffect中绑定Socket.io的msg-receieved事件时，回调函数会捕获组件首次渲染时的selectedChatUser值。后续Redux中selectedChatUser状态更新后，这个回调里的变量并不会同步更新——因为该useEffect的依赖只有socket，不会重新执行，所以回调始终使用初始的空值。

方法1：用useRef保存最新状态值 #

通过useRef跟踪最新的selectedChatUser和loggedInUserEmail，确保Socket回调能拿到实时状态：

import React,{useState,useEffect, useRef} from "react";
import { useSelector } from 'react-redux';
import { getMessage } from "../../services/messageService";

function ChatContainer() {
  const loggedInUserEmail = useSelector(state=>state.loggedInUser.emailId);
  const selectedChatUser = useSelector(state=>state.selectedChatUser.selectedChatUser);
  const socket = useSelector(state=>state.socket.socket);
  const [userAllMessages, setUserAllMessages] = useState([]);
  
  // 用ref保存最新状态引用
  const loggedInUserRef = useRef(loggedInUserEmail);
  const selectedChatUserRef = useRef(selectedChatUser);

  // 状态更新时同步ref
  useEffect(() => {
    loggedInUserRef.current = loggedInUserEmail;
    selectedChatUserRef.current = selectedChatUser;
  }, [loggedInUserEmail, selectedChatUser]);

  useEffect(()=>{
    if(!socket)return;
    
    const handleMessageReceived = async ()=>{
      console.log("message received: ",userAllMessages);
      // 从ref中获取最新状态
      const payload = {
        from: loggedInUserRef.current,
        to: selectedChatUserRef.current?.email
      };
      try {
        const response = await getMessage(payload);      
        if(response.data.status === 200){
          setUserAllMessages(response.data.messages);
        } else {
          console.log("Error while getting user messages: ",response.data);
        }
      } catch (error) {
         console.log("Error while getting user messages: ",error);
      }
    }

    socket.on('msg-receieved', handleMessageReceived);
    // 清理函数：移除旧监听，避免重复绑定
    return () => {
      socket.off('msg-receieved', handleMessageReceived);
    }
  },[socket])

  // 剩余代码保持不变
}

方法2：让useEffect依赖selectedChatUser #

每次selectedChatUser变化时，重新绑定Socket事件，确保回调使用最新状态：

useEffect(()=>{
  if(!socket || !selectedChatUser)return;
  
  const handleMessageReceived = async ()=>{
    console.log("message received: ",userAllMessages);
    await getUserAllMessage();
  }

  socket.on('msg-receieved', handleMessageReceived);
  // 清理旧监听
  return () => {
    socket.off('msg-receieved', handleMessageReceived);
  }
},[socket, selectedChatUser]) // 添加selectedChatUser到依赖数组

1. 在getUserAllMessage中增加空值判断，避免无效请求：

const getUserAllMessage = async ()=>{
  if(!selectedChatUser) return; // 提前退出，避免空值请求
  let payload = {
    from:loggedInUserEmail,
    to:selectedChatUser?.email
  }
  // 后续代码不变
}

2. 确保Socket事件监听不会重复绑定：每次绑定前必须用off移除旧监听，否则会导致多次触发回调。

内容的提问来源于stack exchange，提问作者Rishabh Raghwendra