React聊天应用中useEffect内useContext获取currentUser为空对象的问题

你的问题核心是useEffect依赖数组为空，导致回调函数捕获的是组件挂载时的currentUser（当时还没加载完成，是空对象），后续currentUser更新后，回调也不会拿到最新值。

以下是具体的修复方案：

1. 补充useEffect的依赖数组 #

把currentUser加入依赖数组，这样当currentUser从空对象更新为真实用户数据时，useEffect会重新执行，更新socket的消息监听回调，确保拿到最新的用户信息。同时要注意清理旧的监听，避免重复绑定：

const { currentUser } = useContext(AuthContext);
useEffect(() => {
    // 定义消息处理函数
    const handleMessage = (e) => {
        console.log(currentUser);
        const data = JSON.parse(e.data);
        // 注意：currentUser是对象，不需要用[0]，直接取username即可
        setMessages(old => [...old, <p ref={oneRef} className={currentUser?.username}>{data.message}</p>])
    };

    // 绑定监听
    chatSocket.onmessage = handleMessage;

    // 清理函数：组件卸载或依赖更新时移除旧监听
    return () => {
        chatSocket.onmessage = null;
    };
}, [currentUser]); // 加入currentUser作为依赖

2. 修正currentUser的取值方式 #

你代码里写的currentUser[0]?.username，既然currentUser是对象，这里的[0]是错误的，应该直接用currentUser?.username来避免空值报错。

额外说明 #

• 加入依赖数组后，只有当currentUser发生变化时，useEffect才会重新执行，不会频繁触发，也不需要每次发消息调用axios，符合你的需求。
• 清理函数的作用是防止组件卸载后还执行旧的回调，或者多次绑定导致重复处理消息。

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