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.