Entonces, esta es más una pregunta de javascript que una pregunta de reactjs. Estoy creando una ruta protegida en reactjs. En esto, estoy obteniendo la solicitud de obtención '/checkauth' para verificar la autenticación y me devuelve correctamente la respuesta. Sin embargo, el problema es que, dado que es una función asíncrona, lleva tiempo devolver ese valor y, por lo tanto, mi declaración de devolución se ejecuta antes. Este es el código con el que estoy teniendo problemas.
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' />;Aquí, la autenticación siempre está indefinida y, por lo tanto, siempre navega hacia la firma.
Usa tres estados.
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 />Puede devolver un indicador de carga mientras obtiene los datos, y cuando la solicitud se complete, el estado se actualizará y se representará el componente <Outlet /> .
Por cierto: cuando pasa una función asíncrona al gancho useEffect, devuelve una promesa y useEffect no espera que la función de devolución de llamada devuelva Promis e, sino que espera que la devolución de llamada no devuelva nada (indefinido) o una función (típicamente una función de limpieza).
Prueba esto:
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);; }, [])