React Native 在异步函数中设置状态总是返回false

cidc1ykv  于 6个月前  发布在  React
关注(0)|答案(2)|浏览(66)

我试图生成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 板。

cu6pst1q

cu6pst1q1#

useState钩子不会更新它的状态 * 直到下一次渲染 *(xdc)。把setIsLogged(和所有状态更新)看作是“低优先级指令”,它可以被“慢进程”检测到并在 * 以后 * 采取行动,例如渲染
您的逻辑的其余部分是正确的,因为它没有直接使用isLogged-因此可以快速执行。
为了您的健康,或者如果您需要一个副作用,您可以使用useEffect钩子来记录检测到对isLogged的更改的时间

useEffect(() => {
        console.log('User logged in', isLogged);
        // Some other side effect

   }, [isLogged])

字符串

afdcj2ne

afdcj2ne2#

如果你的意思是你在console.log('User logged in', isLogged);行得到了false,这是因为setState是blog,所以在同一个函数调用中,状态的变化不会立即可见。你的状态应该在你使用那个钩子的组件中更新(当然,如果满足其他条件的话)

相关问题