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

【问题标题】：How to run a function when reloading react重新加载react时如何运行函数
【发布时间】：2021-09-24 12:53:41
【问题描述】：

我正在使用 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 登录时，会在 localstorage 中创建一个令牌。

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

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

如何在渲染前执行函数获取数据？

【问题讨论】：

标签： reactjs asynchronous redux amazon-cognito refresh

【解决方案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)
}

【讨论】：