Estoy extrayendo datos de una API criptográfica que carga datos de 250 monedas. Cuando saco solo 100 monedas, los datos se muestran bien. Cuando lo veo a 250, los datos se procesan antes de cargar y da un error. Los datos se cargan en la consola cuando registro 250 monedas.
La función de datos:
const fetchCoinData = async () => { setLoading(true); const fetchedCoinData = await getCoinsData(); setData(fetchedCoinData); setLoading(false); }; useEffect(() => { fetchCoinData(); }, []);La llamada a la API:
export 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=false&price_change_percentage=1h%2C24h%2C7d` ); return response.data; } catch (e) { console.log(e); } };Sería útil si envolviera su respuesta de axios en una promesa y cambiara su estado en la función entonces, ya que parece que su estado se actualiza antes de que finalice su llamada a la API. Algo como lo siguiente ayudaría.
await getCoinsData() .then(fetchedCoinData => { setData(fetchedCoinData)) setLoading(false) });