React登录重定向后useEffect未触发，组件无法更新的问题求助

我开发的网站支持用户登录功能，登录成功后会重定向至首页。首页导航栏有个个人资料组件用于展示用户信息，但负责加载用户数据、渲染该组件的useEffect钩子，在登录重定向后并未触发，必须手动刷新页面才会显示个人资料。已确认其他代码正常，问题只出在useEffect上——原本配置为组件挂载时执行，但实际只有页面刷新时才运行。

附上相关代码：

const [user, setUser] = useState(true)
const [extUser, setExtUser] = useState()
const [menu, setMenu] = useState(false)

console.log("Component is rendering"); // 控制台能看到输出

useEffect(() => {
    console.log("useEffect is getting mounted");
    const getUser = localStorage.getItem("user_token");
    console.log("Token from localStorage:", getUser); // 打印获取到的token

    if (getUser) {
        setUser(true);
        let decodedToken = jwtDecode(getUser);
        let somevar = JSON.parse(JSON.stringify(decodedToken));
        setExtUser(somevar);
        console.log(somevar);
    }
}, [user]); // 试过移除依赖数组但没用

{user ? {display the profile here} : (
    <button
        onClick={() => navigate("/auth")}
        className="bg-transparent  hover:bg-gray-500 text-black font-bold  hover:text-white py-2 px-4 border border-slate-500 hover:border-transparent rounded-lg">Login</button>
)}

原因分析 #

• 初始state设置错误：user初始值设为true，登录前localStorage还没有user_token时，组件就会直接显示个人资料区域，但此时extUser是空的；同时useEffect依赖user，初始值已经是true，登录重定向回来后user状态没变化，所以useEffect不会触发。
• 依赖数组配置不合理：把user作为依赖，只有user值改变才会执行useEffect，但登录重定向后user还是true，不会触发；如果移除依赖数组，useEffect只在组件首次挂载时执行一次，登录重定向时组件已经挂载过，所以也不会重新执行。

解决方案 #

方法一：修正初始state并监听路由变化 #

1. 把user初始值改为false，确保登录前显示登录按钮；
2. 监听路由路径变化，因为登录重定向属于路由跳转，组件不会重新挂载，监听路由变化能触发useEffect重新执行。

修改后的代码示例：

import { useLocation } from 'react-router-dom'; // 引入useLocation

const [user, setUser] = useState(false) // 初始值改为false
const [extUser, setExtUser] = useState()
const [menu, setMenu] = useState(false)
const location = useLocation(); // 获取当前路由信息

console.log("Component is rendering");

useEffect(() => {
    console.log("useEffect triggered");
    const getUser = localStorage.getItem("user_token");
    console.log("Token from localStorage:", getUser);

    if (getUser) {
        setUser(true);
        let decodedToken = jwtDecode(getUser);
        let somevar = JSON.parse(JSON.stringify(decodedToken));
        setExtUser(somevar);
        console.log(somevar);
    } else {
        setUser(false); // 无token时重置状态
    }
}, [location.pathname]); // 监听路由路径变化，登录重定向时触发

{user ? (
    <div> {/* 替换为你的个人资料组件 */}
        {/* 示例：显示用户名 {extUser?.username} */}
    </div>
) : (
    <button
        onClick={() => navigate("/auth")}
        className="bg-transparent  hover:bg-gray-500 text-black font-bold  hover:text-white py-2 px-4 border border-slate-500 hover:border-transparent rounded-lg">Login</button>
)}

方法二：登录成功后通过路由状态传递用户信息 #

在登录页面成功登录后，除了把token存入localStorage，还可以通过路由state传递用户信息到首页，首页直接读取state更新状态，不用依赖useEffect读取localStorage。

登录页面代码示例：

// 登录成功逻辑
const token = "获取到的登录token";
const decodedToken = jwtDecode(token);
localStorage.setItem("user_token", token);
// 重定向到首页并传递用户信息
navigate("/", { state: { userInfo: decodedToken } });

首页组件代码示例：

import { useLocation } from 'react-router-dom';

const location = useLocation();

useEffect(() => {
    // 优先从路由state取用户信息
    if (location.state?.userInfo) {
        setUser(true);
        setExtUser(location.state.userInfo);
    } else {
        // 兼容页面刷新的情况，从localStorage读取
        const getUser = localStorage.getItem("user_token");
        if (getUser) {
            setUser(true);
            let decodedToken = jwtDecode(getUser);
            setExtUser(decodedToken);
        } else {
            setUser(false);
        }
    }
}, [location.state]); // 监听路由state变化

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