ReactJs，如何等待我的函数返回一些东西

Question

我有一个函数调用isAuthenticated，可以像这样检查令牌的有效性：isAuthenticated = async () => {        const data = await request.call({            url: `http://localhost:1337/utilisateurs/VerifyUserTok`,            method: `post`,            parameters : {                authorization: `bearer ${sessionStorage.getItem(`token`)}`            }        });        if (data.IsValide){            return true;        } else {            return false;        }    }在我受保护的路由中，如果上一个函数返回 false，我不会重定向该人。但是在 protected.route.js 文件中，该函数在第一次返回时进入，而无需等待我的 isAuthenticated 函数返回一些内容：import React from 'react';import { Route, Redirect } from 'react-router-dom';import auth from './auth.js'import NavMenu from './NavMenu';export const ProtectedRoute = ({ component: Component, ...rest }) => {    return (        <Route             {...rest}             render = {props => {                if(auth.isAuthenticated()){                    return <div className="page-body">                                <Route>                                    <NavMenu/>                                    <div className="right-body">                                        <Component {...props}/>                                    </div>                                </Route>                            </div>                } else {                    return <Redirect to={                        {                            pathname: "/",                            state: {                                from: props.location                            }                        }                         } />                }            }}        />    );}

Answer 1

您将需要一些状态来保存您要查找的信息，并且您需要在效果中执行身份验证查找。

当然，您可以选择在身份验证检查进行时以某种方式显示加载指示器，但您可以根据需要找出该机制。

import React, { useState, useEffect } from 'react';

import { Route, Redirect } from 'react-router-dom';

import auth from './auth.js'

import NavMenu from './NavMenu';

export const ProtectedRoute = ({ component: Component, ...rest }) => {

    const [isAuthed, setIsAuthed] = useState(false);

    const [isLoaded, setIsLoaded] = useState(false);

    // Assuming you just want to check on initial render

    useEffect(() => {

      let mounted = true;

      const checkAuth = async () => {

        const authed = await auth.isAuthenticated();

        if (mounted) {

          setIsAuthed(authed);

          setIsLoaded(true);

        }

      checkAuth();

      return () => {

        mounted = false;

      }

    }, [])

    return !isLoaded ? "Loading..." : (

        <Route 

            {...rest} 

            render = {props => {

                if(isAuthed){

                    return <div className="page-body">

                                <Route>

                                    <NavMenu/>

                                    <div className="right-body">

                                        <Component {...props}/>

                                    </div>

                                </Route>

                            </div>

                } else {

                    return <Redirect to={

                        {

                            pathname: "/",

                            state: {

                                from: props.location

                            }

                        }     

                    } />

                }

            }}

        />

    );

}

Answer 2

您可以为结果处理三种不同的状态。未定义，真实和虚假。isAuthenticated()

• 未定义：您的组件将显示一个加载程序，等待您的API调用结束

• 真/假：与你的行为相同。

只需将其存储在变量中并执行类似操作即可：

// ... Ommited code

if(isAuthed === undefined) return <Loader />;

return (

// ... Your code with true/false condition