如何在重新加载react时运行函数

Question

我正在使用congnito进行身份验证，并尝试创建一个privateRoute。

我目前使用的是redux和amazon-cognito identity-js

​

export const cognitoSignIn = async ({
  email,
  password,
}: SignInInfo): Promise<CognitoUserSession> => {
  return new Promise((resolve, reject) => {
    console.log(email, password);

    const authenticationDetails = new AuthenticationDetails({
      Username: email.trim(),
      Password: password.trim(),
    });
    const cognitoUser = new CognitoUser({
      Username: email,
      Pool: userPool,
    });

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => {
        if (!currentUser) {
          currentUser = userPool.getCurrentUser();
        }

        currentUser.getSession((err: any, session: CognitoUserSession) => {
          if (err) {
            reject(err);
          } else {
            resolve(session);
          }
        });
      },
      onFailure: reject,
    });
  });
};

​

​

export const signIn =
  (signinInfo: SignInInfo) =>
  async (dispatch: Dispatch<UpdateToken | UpdateError>) => {
    try {
      const auth: CognitoUserSession = await cognitoSignIn(signinInfo);
      const accessToken = auth.getAccessToken().getJwtToken();

      localStorage.setItem("user", JSON.stringify(accessToken));
      dispatch(updateToken(accessToken));
    } catch (error: any) {
      dispatch(updateError(error));
    }
  };

​

我的问题与上面的代码无关。

当你登录时，会在本地存储中创建一个令牌。

刷新时，要获取本地存储中令牌的状态，需要使用cognito getSession函数。

但是getSession函数是一个异步函数

如何通过在渲染之前执行函数来获取数据？

Answer 1

我的建议是使用一个“加载状态”，只要你在等待你的异步函数，它就会被呈现。

例如：

const example = () => {
    useState[isLoading, setIsLoading] = useState(false)
    
    useEffect(() => {
        const asyncFunction = async() => {
            setIsLoading(true)
            await(something...)
            setIsloading(false)
        }
        asyncFuntion()  
    }, [])

    if(isLoading) return (e.g LoadingSpinner)

    return (your component)
}