在渲染反应路由之前等待异步函数的结果答案

【问题标题】：Wait a result of a async function before render react routes在渲染反应路由之前等待异步函数的结果
【发布时间】：2020-06-11 11:30:30
【问题描述】：

我正在尝试使用路由文件中的 React 在我的 SPA 中实现身份验证服务。当用户尝试访问某个私有路径时，该函数应验证机器内的令牌是否有效。但是我在这个逻辑中遇到了一个问题，该函数正在将错误值传递给私有路由。

我的路线文件：

    const Routes = () => {

    var [authedIn, setAuthedIn] = useState(false);
    var authedNow = useRef(authedIn);

    const verifyLog = async () => {
        if (await AuthUser().then(res => res).catch(res => res) === true) {
            setAuthedIn = true;
            authedNow.current = true;
            console.log('log in');
            console.log(authedNow.current);
            return true;
        }
        else {
            setAuthedIn = false;
            authedNow.current = false;
            console.log('log of');
            return false;
        }
    }

    useEffect(() => {
        verifyLog()
    }, [authedNow.current]);

    console.log(authedNow.current);

    return (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={HomeScreen} />
            <Route exact path="/register" component={RegisterScreen} />
            <Route exact path="/login" component={LoginScreen}/>
            <PrivateRouter exact path="/notes" component={NotesScreen} isAuth={authedNow.current}/>
            <PrivateRouter exact path="/users/edit" component={UsersEditScreen} isAuth={authedNow.current}/>
        </Switch>
    </BrowserRouter>
)};

 export default Routes;

AuthUser 文件：

    const AuthUser = async () => {
    const response = await AuthService.verifyToken();
    if (response.status === 200) {
        return true;
    } else {
        localStorage.clear();
        return false;
    }
}

有没有办法在async函数的结果之后渲染？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

要在异步功能完成后重新渲染，您需要更新状态。我对使用 refs 不是很了解，但是您错误地使用了 setAuthedIn 函数。您需要使用参数调用它，而不是将其设置为布尔值。

尝试将您的 verifyLog 函数更改为如下所示：

const verifyLog = async () => {
    if (await AuthUser().then(res => res).catch(res => res) === true) {
        setAuthedIn(true); // <- call the setter function to update authedIn state
        return true;
    }
    else {
        setAuthedIn(false);
        return false;
    }
}

【讨论】：

在逻辑开始时保持假。 [HMR] 等待来自 WDS 的更新信号... routes.js:37 false routes.js:37 false routes.js:37 true routes.js:37 true routes.js:21 登录
这可能是由于 useEffect 的第二个参数，它只会在 authedNow.current ref 更新时应用效果。我假设如果变量是更改的引用，则引用将被更新，但可能不会。您可以尝试重新添加 authedNow.current = true; 或 false 语句。

【解决方案2】：

由于您已经从 async await AuthUser 返回了一个布尔值，您可以将 verifyLog 简化为：

const verifyLog = async () => {
  const isAuthorized = await AuthUser()
    setAuthedIn(isAuthorized);
    authedNow.current = isAuthorized;
    return isAuthorized;
  }
}

我建议将 AuthUser 包装到 try catch 块中，其中 catch 块返回 false 以保持一致性。

如果它一直为 state 设置一个 false 值，那么最好检查 response.status 值。

【讨论】：