Estoy obteniendo algunos datos para representarlos en la página. Si el usuario o los datos no están disponibles, intento generar un componente que indique que la cuenta del usuario está inactiva o pendiente. Mi problema es que estoy procesando el componente pendiente mientras espero que se carguen los datos y la transición parece un poco incómoda. ¿Cómo haría para configurarlo para que no se muestre nada hasta que se haya resuelto el proceso de obtención de datos?
Mi código:
const { user } = useAuth0(); const [records, setRecords] = useState([]); const [hasLoaded, setHasLoaded] = useState(); useEffect(() => { fetchData(); }, [records]); const fetchData = () => { fetch(recordapi + "/record") .then((response) => response.json()) .then((data) => { setRecords(data); setHasLoaded(true); }) .catch((error) => { console.log(error); }); }; let userProfile = records.find((x) => x.email === user.email); return ( <>{userProfile && hasLoaded ? <AdminDashboard /> : <PendingAccount />}</> ); } export default AdminDashboardPage;En este escenario, puede usar la rueda giratoria hasta que obtenga los datos usando react-loader-spinner.
import Loader from 'react-loader-spinner'; hasLoaded ? <div> <Loader type="Rings" color="#00BFFF" height={70} width={70} timeout={10000}/> </div>: your code.`Parece que necesitas algo como
return userProfile // The API has finished and the email is found ? <AdminDashboard /> // Otherwise, show PendingAccount only after the API has finished and no email is found : hasLoaded && <AdminDashboard />; Pero es posible que pueda eliminar el estado hasLoaded completo y, en su lugar, verificar records.length -
return userProfile // The API has finished and the email is found ? <AdminDashboard /> // Otherwise, show PendingAccount only after the API has finished and no email is found : records.length > 0 && <AdminDashboard />;En una nota completamente diferente, si este código se ejecuta en el lado del cliente, parece que está enviando los datos de todos los usuarios administradores al cliente, luego verifica si este cliente en particular es un miembro; este proceso bien puede permitir que el cliente para recopilar los datos de usuario de los administradores, incluidos los correos electrónicos, lo que probablemente no sea deseable. Si esto le preocupa, podría considerar realizar la validación en el servidor.