reactjs：一个不更新其变量的上下文组件函数； usestate 不能立即工作？

Posted 2023-04-14

【中文标题】reactjs：一个不更新其变量的上下文组件函数； usestate 不能立即工作？

【英文标题】：reactjs: a context component function not updating its variable; usestate not working immediately?

【发布时间】：2022-01-23 09:26:00

【问题描述】：

我正在我的应用中处理身份验证，因此我创建了一个上下文来管理它：

import React,  useState  from "react";

const AuthContext = React.createContext(
    token: "",
    isLoggedIn: false,
    login: (token) =>  ,
    logout: () =>  ,
);

export const AuthContextProvider = (props) => 
    const [token, setToken] = useState(null);
    const [userIsLoggedIn, setUserLoggedIn] = useState(false)

    const loginHandler = async (token) => 
        setToken(token);
        setUserLoggedIn(true)
        console.log(userIsLoggedIn)   //prints false
    ;

    const logoutHandler = () => 
        setToken(null);
        setUserLoggedIn(false)
    ;

    const contextValue = 
        token: token,
        isLoggedIn: userIsLoggedIn,
        login: loginHandler,
        logout: logoutHandler,
    ;


    return (
        <AuthContext.Provider value=contextValue>
            props.children
        </AuthContext.Provider>
    );
;

export default AuthContext;

问题是当我从外部组件调用 context.login('some token') 然后 console.log(context.isLoggedIn) 我第一次得到 false，但如果我调用 context.login('some令牌'）我再一次得到了真实。在那之后的每一次我现在都变得真实了。这可能与 loginHandler 中的“console.log(userIsLoggedIn)”说“false”（第一次调用 context.login）有关，即使 setUserLoggedIn 就在它的正上方。我认为 userIsLoggedIn 变量在它使用的组件中更新上下文后发生了变化，但我不知道如何解决这个问题。 我将不胜感激这方面的任何帮助

【问题讨论】：

尝试使用 useEffect 和 token 或 userIsLoggedIn 作为依赖项，并在该钩子中使用 console.log。此外，您可以在调用基于依赖的函数时尝试 useCallback

【参考方案1】：

您不能依靠 userIsLoggedIn 的值来立即获得传递给 setUserLoggedIn 的值。

如果您想跟踪 userIsLoggedIn 变量，您可以考虑这样的事情：

React.useEffect(() => 
  console.log(userIsLoggedIn)
, [userIsLoggedIn])

【讨论】：

问题是当我尝试在我使用上下文的组件中 console.log(context.userIsLoggedIn) 时，而不是上下文的实际组件功能。在这种情况下使用 useEffect 似乎没有帮助，它仍然第一次打印出 false ，好像变量没有足够快地更新

这是因为您在上下文中的默认值设置为 false。所以第一次渲染，它是假的，直到它正确地重新渲染一次。