Tengo una API de criptomonedas que da resultados basados en el número de página. Entonces quiero cambiar el número en la llamada según los botones de paginación. El número cambia pero los datos no se recargan.
const [activePage, setActivePage] = useState(8); const getCoinsData = async () => { try { const response = await Axios.get( `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=${activePage}&sparkline=true&price_change_percentage=1h%2C24h%2C7d` ); setData(response.data); setLoading(false); } catch (e) { console.log(e); } }; useEffect(() => { getCoinsData(); }, []);Esta es la estructura de paginación.
<div className="home-pagination"> <div className={ activePage === 1 ? "pagination-button active" : "pagination-button" } onClick={() => setActivePage(1)} > 1 </div> <div className={ activePage === 2 ? "pagination-button active" : "pagination-button" } onClick={() => { setActivePage(2); }} > 2 </div> </div>¿Cómo vuelvo a renderizar el componente para que los nuevos datos se carguen en función del nuevo número de página?
Su estado se actualiza correctamente con cada clic en la página. Lo único que debe hacer es volver a llamar a la API. Puedes manejarlo en useEffect
useEffect(() => { getCoinsData(); }, [activePage]); al agregar activePage como una dependencia de useEffect, llamará a la API getCoinsData en cada cambio de activePage