React JSX 检查异步 function 是否返回 true 或 false

Question

在一个组件中，我实现了一个 function 调用，该调用具有承诺的调用并返回true或false 。 我正在使用如下条件渲染调用：

return (
  isAuthValid() ? <div>Authenticated</div> : </div>Invalid User</div>
)

isAuthValid有一个 Rest 调用，如下所示：

async function isAuthValid(){
 const response = await getAuth(); 
 // response.data return boolean value (true or false)
 return response.data;
}

我从isAuthValid执行收到Promise {<pending>}而不是 boolean 值。 我也可以通过分配和更新state来做到这一点。

例如

const {auth, setAuth} = React.useState(false);

 async function isAuthValid(){
  const response = await getAuth(); 
  setAuth(response.data)
 }

return (
 auth ? <div>Authenticated</div> : </div>Invalid User</div>
)
 

我试图理解为什么直接执行不起作用。 我已经实现了async-await以使其异步。 如何在不使用 state 挂钩的情况下使其工作？

Answer 1

您需要确保在加载组件时触发此代码。 您可以使用 useEffect 挂钩来执行此操作，并传入一个空的依赖项数组，因此它只运行一次。

我从 async/await 切换到 promise 只是因为它们对我来说更容易理解。

import React, {useState, useEffect} from "react";
import getAuth from "./get-auth";

function MyComponent() {
  const [auth, setAuth] = React.useState(false);
  useEffect(() => {
    getAuth()
    .then(response => {
       setAuth(response.data)
    }).catch(error => {
      // If error, let's set their auth to false.
      setAuth(response.data)
    });
  }, []);

  return (
    auth ? Authenticated : Invalid User
  );
}