如何解决Promise未决的问题

他那·马他努克劳

我目前正在尝试使受保护的路由功能做出反应。我希望这result将返回一个布尔值而不是一个承诺而不更改ProtectedRoute为async：

 import React from "react";
    import { Redirect, Route } from "react-router-dom";
    import { CheckToken } from "./RequestAction"
    
    function ProtectedRoute({ component: Component, ...restOfProps }) {
    
      const result = (async () => {
        const res = await CheckToken() 
        return res;
      })()
     
      console.log(result); //log-> Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: false
      return (
        <Route
          {...restOfProps}
          render={(props) =>
            result ? <Component {...props} /> : <Redirect to="/login/" />
          }
        />
      );
    }
    
    
    export default ProtectedRoute;

这是CheckToken函数：

 import axios from "axios";
 async function CheckToken() {
    let result = null;
    await axios
      .get(`http://localhost:5000/protected`, 
        {"withCredentials": true}
      )
      .then((res) => {
        console.log("res.data.status:",res.data)
        if (res.data.status === "success") {
            result = true
        }
      })
      .catch((err) => {
        result = false
      });
      console.log("result:",result);
      return result

}

gu mingfeng

const useToken = () => {
    const [token, setToken] = useState(null);
    useEffect(() => {
        const f = async () => {
            const res = await CheckToken();
            //TODO: add check login;
            setToken(res);
        };
        f();
    })
    return token;
}

function ProtectedRoute({ component: Component, ...restOfProps }) {
  const token = useToken();
  return (
    <Route
      {...restOfProps}
      render={(props) =>
        token ? <Component {...props} /> : <Redirect to="/login/" />
      }
    />
  );
}

函数组件主体不能是异步的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。