返回当前处于承诺状态的值

Question

所以这更像是一个 javascript 问题而不是 reactjs 问题。我在 reactjs 中创建一个受保护的路由。在此，我正在获取 '/checkauth' get 请求以检查身份验证，它正确地 returns 对我的响应。然而问题在于，由于它是一个异步函数，因此 return 该值需要时间，因此我的 return 语句会更早执行。这是我遇到问题的代码。

const [auth, setAuth] = useState();

const checkAuthentication = async ()=>{
    const res = await fetch('/checkauth', {
        method : "GET",
        credentials: "include", 
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    });
    const data = await res.json();
    return res.status===200 ? (data.isAuthenticated) : (false) ;
}

useEffect(async ()=>{
    const data = await checkAuthentication();
    setAuth(data)
}, []);

return auth ? <Outlet /> : <Navigate to='/signin' />;

这里的 auth 总是未定义的，因此它总是导航到签名。

Answer 1

使用三种状态。

const [auth, setAuth] = useState("loading");

...

setAuth(data ? "auth" : "not-auth");

...

if (auth === "loading")
    return <Loading />
else if (auth === "not-auth")
    return <Navigate to='/signin' />
else 
    return <Outlet />

Answer 2

您可以在获取数据时 return 加载微调器，当请求完成时，状态将更新并呈现 <Outlet /> 组件。

顺便说一句：当您将异步函数传递给 useEffect 挂钩时，它 return 是一个 promise，useEffect 不期望 return Promis 的回调函数e，它期望回调 return 什么都没有（未定义）或函数（通常是清理函数）。

试试这个：

useEffect(() => {
  // declare the async data fetching function
  const fetchData = async () => {
    // get the data from the api
    const data = await fetch('https://yourapi.com');
    // convert the data to json
    const json = await response.json();

    // set state with the result
    setData(json);
  }

  // call the function
  fetchData()
    // make sure to catch any error
    .catch(console.error);;
}, [])

更多信息：

返回当前处于承诺状态的值

Returning a value which is currently in promised state

javascript

async-await

reactjs