MERN栈React应用中useEffect实现登录后用户资料即时更新

// UserDetailsContext.js
const UserDetailsContext = createContext();

export function UserDetailsProvider({ children }) {
  const { user, setUser } = useUserContext(); // 假设 user 来自一个全局的用户上下文
  const [userData, setUserData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phoneNumber: "",
    location: "",
  });

  useEffect(() => {
    // 假设 getUser2() 用于获取当前登录用户的详细资料
    const dataPromise = getUser2().then((res) => {
      setUserData({
        firstName: res.firstName,
        lastName: res.lastName,
        email: res.email,
        phoneNumber: res.phoneNumber,
        location: res.location,
      });
    });
    // 注意：这里的 return () => dataPromise; 是不正确的清理方式
    return () => { /* 实际的清理逻辑，例如取消请求 */ }; 
  }, [userData]); // ⚠️ 问题所在：依赖了 userData
}

// App.js
export default function App() {
  // const route = useNavigate(); // 导航钩子，与当前问题关系不大
  const [user, setUser] = useState(null); // App组件内部的用户状态

  useEffect(() => {
    // 假设 getUser() 用于检查用户是否已登录并获取用户名
    const unsubscribePromise = getUser()
      .then((res) => {
        if (res.error) return console.log(res.error);
        else setUser(res.username); // 更新 App 组件内部的 user 状态
      })
      .catch((err) => console.log(err));
    // 注意：这里的 return () => unsubscribePromise(); 也是不正确的清理方式
    return () => { /* 实际的清理逻辑 */ }; 
  }, []); // 依赖数组为空，只在组件挂载时执行一次
}

// Controller (Node.js/Express)
exports.getLoggedInUser = (req, res) => {
  return res.status(200).json({
    message: "User is still logged in",
    firstName: req.user.firstName,
    lastName: req.user.lastName,
    email: req.user.email,
    location: req.user.location,
    phoneNumber: req.user.phoneNumber,
    username: req.user.username,
  });
};

// UserDetailsContext.js (修正版)
import React, { createContext, useState, useEffect, useContext } from 'react';
// 假设 useUserContext 是一个自定义钩子，用于提供全局用户状态
// import { useUserContext } from './UserContext'; // 假设的路径

const UserDetailsContext = createContext();

export function UserDetailsProvider({ children }) {
  // 从全局用户上下文获取当前登录用户状态
  const { user } = useUserContext(); // 假设 user 为 null 或包含用户ID/信息

  const [userData, setUserData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phoneNumber: "",
    location: "",
  });

  useEffect(() => {
    // 只有当 user 存在（即用户已登录）时才获取资料
    if (user) { 
      // 假设 getUser2() 根据当前登录用户获取其详细资料
      // 这里的 getUser2() 应该是一个异步函数，调用后端的 getLoggedInUser 接口
      getUser2()
        .then((res) => {
          setUserData({
            firstName: res.firstName,
            lastName: res.lastName,
            email: res.email,
            phoneNumber: res.phoneNumber,
            location: res.location,
          });
        })
        .catch((err) => {
          console.error("Failed to fetch user details:", err);
          // 可以在此处设置错误状态或清空 userData
          setUserData({ firstName: "", lastName: "", email: "", phoneNumber: "", location: "" });
        });
    } else {
      // 用户未登录时，清空用户资料
      setUserData({ firstName: "", lastName: "", email: "", phoneNumber: "", location: "" });
    }

    // 正确的清理函数示例（如果 getUser2 支持取消请求）
    // return () => {
    //   if (abortController) { // 假设 getUser2 内部使用了 AbortController
    //     abortController.abort();
    //   }
    // };
  }, [user]); // 依赖于 user 状态

  // 提供 userData 给子组件
  return (
    <UserDetailsContext.Provider value={userData}>
      {children}
    </UserDetailsContext.Provider>
  );
}

// 用于消费 UserDetailsContext 的自定义钩子
export function useUserDetails() {
  return useContext(UserDetailsContext);
}

// UserContext.js
import React, { createContext, useState, useContext, useEffect } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null); // 存储登录用户的ID或用户名

  useEffect(() => {
    // 首次加载时检查登录状态
    // 假设 getUser() 返回登录用户的 username 或 null
    getUser() // 你的 API 调用
      .then(res => {
        if (!res.error && res.username) {
          setUser(res.username);
        } else {
          setUser(null);
        }
      })
      .catch(err => {
        console.error("Failed to check login status:", err);
        setUser(null);
      });
  }, []); // 只在组件挂载时执行一次

  const login = async (credentials) => {
    // 假设 loginUser API 返回用户信息
    const response = await loginUser(credentials); // 你的登录 API 调用
    if (!response.error) {
      setUser(response.username); // 登录成功后更新全局 user 状态
      return true;
    }
    return false;
  };

  const logout = () => {
    // 假设 logoutUser API 清除会话
    logoutUser(); // 你的登出 API 调用
    setUser(null); // 登出后清空全局 user 状态
  };

  return (
    <UserContext.Provider value={{ user, setUser, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUserContext() {
  return useContext(UserContext);
}

// App.js
import { UserProvider } from './UserContext'; // 假设路径
import { UserDetailsProvider } from './UserDetailsContext'; // 假设路径
// ... 其他组件导入

export default function App() {
  return (
    <UserProvider>
      <UserDetailsProvider>
        {/* 你的路由和其他组件 */}
        <Router>
          {/* ... */}
        </Router>
      </UserDetailsProvider>
    </UserProvider>
  );
}