Cuando el sitio web se carga por primera vez, los datos obtenidos de una API no se muestran. Pero después de una recarga, se muestran los productos. Intenté usar un control giratorio de carga mientras cargaba los datos. La rueda giratoria tampoco se mostrará. ¿Cómo puedo mostrar los datos cargados la primera vez y mientras se cargan los productos se mostrará el indicador giratorio Cargando?
const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsLoading(true); fetch(" https://hidden-citadel-3557.herokuapp.com/inventory") .then((res) => res.json()) .then((data) => setInventories(data)); setIsLoading(false ); }, []); ` if (isLoading) { return <Loading></Loading> }Mueva "setIsLoading(false)" al segundo ".then", así:
const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsLoading(true); fetch(" https://hidden-citadel-3557.herokuapp.com/inventory") .then((res) => res.json()) .then((data) => { setIsLoading(false); setInventories(data) }); }, []); if (isLoading) { return <Loading></Loading> }Según su código, su enfoque no es muy viable.
Esto es lo que haría.
function loadData() { setLoading(true); fetch(" https://hidden-citadel-3557.herokuapp.com/inventory") .then((res) => res.json()) .then((data) => { setInventories(data); setLoading(false); }); } useEffect(loadData,[]);loading para representar el elemento <loading> en función del valor variable del estado de carga: { loading ? <loading></loading> : ""}
Esto funciona para mí:
import React, { useState, useEffect } from "react"; const Index = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { const response = await fetch( "https://627a5a9773bad50685876437.mockapi.io/users" ); await response.json(); setIsLoading(false); }; fetchData(); }, []); return isLoading ? <p>Loading</p> : <p>Loaded!</p>; }; export default Index;