Estoy tratando de hacer la parte de paginación en mi aplicación, sin embargo, los datos son correctos, pero el único problema es cuando trato de llamar o mostrar un componente, es decir, Trending.jsx al hacer clic en un botón (Más popular) y (tipo de alternar botón), al principio obtiene el número de página correcto, pero cuando oculto ese componente Trending.jsx , los números de página siguen siendo los mismos, en mi página/componente predeterminado, que es Movie.jsx
Sin embargo, quiero restablecer el número de página si el componente no se muestra y comenzar desde 1 cuando un usuario hace clic para ver Trending.jsx y viceversa.
Consulte el enlace al cuadro de arena de código para ver el código que probé. https://codesandbox.io/s/moviehunt-demo-forked-rhom0?file=/src/components/Movies/Movies.jsx
Aplicación en vivo completa: https://rhom0.csb.app/movies
Gracias por la ayuda.
Por lo que entendí, el problema es que al alternar entre Películas y Tendencias, el Número de página no se restablece a 1.
Entonces, creé un useEffect con dependencia del estado: showTrending en el que solo actualizo el número de página a 1.
useEffect(() => { setPage(1); }, [showTrending, setPage]);Además, para actualizar el Número de página en Paginación, pasé la página como accesorio a PageNav para que se actualice automáticamente. Espero que esta sea la solución que buscas.
Zona de pruebas de código: https://codesandbox.io/s/moviehunt-pagination-solution-hsc0f/?file=/src/components/Movies/Movies.jsx:2304-2305
En vivo: https://hsc0f.csb.app/movies
Además, recomiendo agregar algo de estilo al botón Más popular para que quede claro cuando se activa y desactiva.