Estoy extrayendo datos de una API de criptomonedas. Tiene datos de 250 monedas en una sola solicitud. Pero si los cargo todos, los datos no se cargan y el componente intenta renderizarse, lo que genera un error. Sigo la práctica habitual de await y useEffect, pero el error persiste.
const Home = () => { const [search, setSearch] = useContext(SearchContext); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const getCoinsData = async () => { try { const response = await Axios.get( `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d` ); setData(response.data); setLoading(false); } catch (e) { console.log(e); } }; useEffect(() => { getCoinsData(); }, []); const negStyle = { color: "#D9534F", }; const positiveStyle = { color: "#95CD41", }; return ( <div className="home"> <div className="heading"> <h1>Discover</h1> <hr className="line" /> </div> {!loading || data ? ( <div style={{ width: "100%", overflow: "auto" }}> <table *the entire table goes here* /> </div> ) : ( <img className="loading-gif" src={Loading} alt="Loading.." /> )} </div> ); }; export default Home;
Este es el código completo. Aún así, cuando trato de actualizar, da errores en función de la cantidad de datos que se cargan. A veces, la función .map no está definida o toFixed está definido, etc. No sigue cargando hasta que se cargan todos los datos.
¿Puede mostrar los errores y cómo inicializó la loading
de su estado y data
para que podamos depurar mejor?
Por lo demás, lo que suelo hacer en este caso es:
if (!loading && data) return <Table />; return <img className="loading-gif" ... />;
import { QueryClient, QueryClientProvider, useQuery } from "react-query"; import axios from "axios"; import React from "react"; import { Image } from "@chakra-ui/image"; const Crypto = () => { const { data, isLoading } = useQuery("crypto", () => { const endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=80&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d"; return axios.get(endpoint).then(({ data }) => data); }); return ( <> {!isLoading && data ? ( data?.map((e, id) => <Image key={id} src={e.image} />) ) : ( <p>Loading</p> )} </> ); }; export default function App() { const queryClient = new QueryClient(); return ( <QueryClientProvider client={queryClient}> <Crypto /> </QueryClientProvider> ); }