Lo que quiero es paginar mis datos, pero el problema es que cuando busco datos específicos, si estoy en la página 3, el resultado siempre se muestra en la página 1 y no puedo ver nada porque estaba en la página 3. Yo quiero ir a la página 1 automáticamente cuando estoy buscando algo. Además, cuando presiono el botón siguiente, si no hay ningún dato, aún aumenta el número de página.

Aquí está mi código:

 import { React, useState, useEffect } from "react"; import UpdateDialogue from "./UpdateDialogue"; function List(props) { const API_URL = "http://dummy.restapiexample.com/api/v1/employees"; const [EmployeeData, setEmployeeData] = useState([]); const [pageNumber, setPageNumber] = useState(1); const [postNumber] = useState(8); const currentPageNumber = pageNumber * postNumber - postNumber; const handlePrev = () => { if (pageNumber === 1) return; setPageNumber(pageNumber - 1); }; const handleNext = () => { setPageNumber(pageNumber + 1); }; useEffect(() => { fetch(API_URL) .then((response) => response.json()) .then((response) => { setEmployeeData(response.data); }) .catch((err) => { console.error(err); }); }, []); const filteredData = EmployeeData.filter((el) => { if (props.input === "") { return el; } else { return el.employee_name.toLowerCase().includes(props.input) } }); const paginatedData = filteredData.splice(currentPageNumber, postNumber); return ( <> <ul> {paginatedData.map((user) => ( <UpdateDialogue user={user} key={user.id} /> ))} </ul> <div>Page {pageNumber} </div> <div> <button style={{marginRight:10}} onClick={handlePrev}>prev</button> <button onClick={handleNext}>next</button> </div> </> ); } export default List;