我试图生成User Authentication
,并从JWT Token
解码User credentials
,同时跟踪用户是否登录。因此,signIn方法是一个异步函数,因此,当我更新isLogged时,它总是返回false。这是下面的代码。
const useAuth = () => {
const tokenKey = 'authToken';
const [isLogged, setIslogged] = useState<boolean>(false);
const [loggedUser, setloggedUser] = useState<authUsers | null>(null);
const {user, setUser} = useContext(AuthContext);
const singIn = async function LoginUser(token: string) {
console.log('calling singin');
if (isLogged && loggedUser) return;
console.log('The USer was not logged in');
try {
console.log('calling singin try');
await AsyncStorage.setItem(tokenKey, token);
console.log('calling singin try setItem with token:', token);
const tok = await AsyncStorage.getItem(tokenKey);
console.log('calling singin try getItem with token:', tok);
if (!token) return;
console.log('Token Found Trying to decode');
const decodedUser = convertTokenToUser(token);
if (!decodedUser) return;
console.log('Decode Successfull Here ', decodedUser);
setIslogged(true);
if (decodedUser) {
console.log('Setting is logged to true ');
console.log('User logged in', isLogged);
console.log('Setting logged user done');
setloggedUser(decodedUser);
console.log('User logged in', decodedUser);
setUser(decodedUser);
}
} catch (error) {
setIslogged(false);
}
};
useLayoutEffect(() => {
const getTokenAndSignIn = async () => {
const token = await getToken();
if (token) {
singIn(token);
}
};
getTokenAndSignIn();
}, []);
return {isLogged, singIn, singOut, getToken, loggedUser};
};
export default useAuth;
字符串
这是我的控制台上的输出...
enter image description here
我希望isLogged返回true,这样我就可以呈现用户 Jmeter 板。
2条答案
按热度按时间cu6pst1q1#
useState
钩子不会更新它的状态 * 直到下一次渲染 *(xdc)。把setIsLogged
(和所有状态更新)看作是“低优先级指令”,它可以被“慢进程”检测到并在 * 以后 * 采取行动,例如渲染您的逻辑的其余部分是正确的,因为它没有直接使用
isLogged
-因此可以快速执行。为了您的健康,或者如果您需要一个副作用,您可以使用
useEffect
钩子来记录检测到对isLogged
的更改的时间字符串
afdcj2ne2#
如果你的意思是你在
console.log('User logged in', isLogged);
行得到了false,这是因为setState是blog,所以在同一个函数调用中,状态的变化不会立即可见。你的状态应该在你使用那个钩子的组件中更新(当然,如果满足其他条件的话)