React中不使用useEffect无法在函数内访问Redux状态变量问题

核心原因 #

你遇到的是React Hook 闭包陈旧值问题：
你注册socket事件的useEffect依赖数组仅声明了socket，组件首次渲染时useEffect就会执行绑定事件逻辑，此时Redux中的user还未完成异步赋值，是初始空对象，绑定的handleNewMessage函数会捕获当前渲染上下文里的空user值。
后续Redux更新user、组件props改变触发重渲染时，因为socket没有变化，useEffect不会重新执行，也就不会更新绑定的事件回调，所以回调里永远读取的是首次渲染时的旧user值。你新增useEffect监听user更新后能拿到正确值，本质就是user变化时重新执行了事件绑定逻辑，捕获了最新的user。

可行解决方案 #

方案1：补全依赖 + 增加事件清理（推荐） #

补全useEffect的依赖项，同时增加事件卸载逻辑，避免重复绑定和内存泄漏，搭配useCallback优化不必要的重绑定：

import React, { useEffect, useState, useCallback } from "react";
import { connect, useDispatch } from "react-redux";

const Chat = ({ conversations, isLoggedIn, user, messages }) => {
  // 用useCallback包裹，仅当user变化时才生成新的函数实例
  const handleNewMessage = useCallback((msg) => {
    console.log(user, "user");
    // 其他业务逻辑
  }, [user]);

  useEffect(() => {
    // 绑定事件
    socket?.on("newMessage", handleNewMessage);
    // 组件卸载/依赖变化时清理旧事件
    return () => {
      socket?.off("newMessage", handleNewMessage);
    }
  }, [socket, handleNewMessage]); // 补全依赖

  return <p>Message</p>
}

const mapStateToProps = (state) => ({
  messages: state.messages.messages,
  isLoggedIn: state.auth.isLoggedIn,
  user: state.auth.user,
  conversations: state.conversations.conversations,
});

export default connect(mapStateToProps)(Chat);

方案2：用useRef存储最新值（无需频繁重绑定事件） #

如果你希望socket事件只绑定一次，可以用useRef同步最新的user值，避开闭包问题：

const Chat = ({ conversations, isLoggedIn, user, messages }) => {
  // 声明ref存储最新user
  const userRef = useRef(user);
  // user变化时更新ref
  useEffect(() => {
    userRef.current = user;
  }, [user])

  const handleNewMessage = (msg) => {
    // 直接读取ref的当前值，永远是最新的
    console.log(userRef.current, "user");
    // 其他业务逻辑
  };

  useEffect(() => {
    socket?.on("newMessage", (msg) => {
      handleNewMessage(msg);
    });
    return () => socket?.off("newMessage", handleNewMessage);
  }, [socket]); // 无需新增依赖，事件仅绑定一次

  return <p>Message</p>
}

内容的提问来源于stack exchange，提问作者Sandip Dhang