Estoy cargando la tarjeta de datos y cuando presiono los botones de paginación, los datos cambian pero la pantalla permanece en el mismo lugar. ¿Cómo me desplazo hacia arriba cuando se presiona el botón? La aplicación es un SPA, ¿quizás eso esté causando el problema?
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); } };Dado que la aplicación es un SPA, es probable que la página no se vuelva a cargar cuando pasa a la página siguiente. Tendrá que desplazarse manualmente hasta la parte superior del componente.
Para hacer eso, agregue una referencia al envoltorio del contenido que desea desplazar hasta la parte superior:
const wrapperRef = useRef(null); // ... blablabla component stuff return { <div ref={wrapperRef}></div> }Luego, solo asegúrese de que el controlador del botón de la página siguiente tenga acceso a la referencia:
const handleNextPageButtonClick = async () => { await getNextPage(); wrapperRef.current.scrollIntoView(); }Otra forma de hacerlo es con un useEffect en el componente que obtiene los nuevos datos en el cambio de página.
editar debería haber actualizado las dependencias. Supongo que su lista está llegando como una variable llamada data . Simplemente agregue eso a la matriz de dependencia. Puede usar su objeto data o su booleano isSuccess si tiene uno.
useEffect(()=>{ window.scrollTo({top: 0}); },[data])