React useEffect 在登录重定向时未触发

Question

说明： 我有一个网站，用户可以登录并在成功登录后重定向到主页。在主页的导航栏中有一个个人资料组件，允许用户查看他们的个人资料。但是，我注意到，负责加载用户数据并显示个人资料组件的 useEffect 钩子在用户登录时不会触发。因此，直到手动刷新页面后才会显示个人资料组件。

我已确保所有其他代码都正确运行，并且问题似乎与 useEffect 挂钩无关。它被配置为在组件安装时运行，但直到刷新页面后才会执行。

什么可能导致此行为，以及如何确保当用户登录并重定向到主页时 useEffect 挂钩正常运行？

任何见解或建议将不胜感激。谢谢！

const [user, setUser] = useState(true)
const [extUser, setExtUser] = useState()
 const [menu, setMenu] = useState(false)
 
 
 console.log("Component is rendering"); // seeing output on a console



    useEffect(() => {
        console.log("useEffect is getting mounted");
        const getUser = localStorage.getItem("user_token");
        console.log("Token from localStorage:", getUser); // Log retrieved token

        if (getUser) {
            setUser(true);
            let decodedToken = jwtDecode(getUser);
            let somevar = JSON.parse(JSON.stringify(decodedToken));
            setExtUser(somevar);
            console.log(somevar);
        }
    }, [user]); // tried removing dependency array but work 

{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>
                            )}

Answer 1

根据您的描述，由于对用户状态的依赖，似乎 useEffect 挂钩可能不会按预期触发。当用户登录并且您将用户状态设置为 true 时，如果它已经为 true，那么 React 不会将其识别为更改，因此 useEffect 将不会重新运行。

以下是可能解决该问题的建议：

您可以依赖用户登录时更改的更具体的状态，例如本地存储中的 user_token，而不是依赖于用户状态。

useEffect(() => {
    console.log("useEffect is getting mounted");
    const getUserToken = localStorage.getItem("user_token");
    console.log("Token from localStorage:", getUserToken); 

    if (getUserToken) {
        setUser(true);
        let decodedToken = jwtDecode(getUserToken);
        let somevar = JSON.parse(JSON.stringify(decodedToken));
        setExtUser(somevar);
    } else {
        setUser(false);
        setExtUser(undefined);
    }
}, []); 

const loginUser = () => {
    localStorage.setItem("user_token", userTokenFromServer);
    setUser((prevUser) => !prevUser); 
};