Creé datos de users ficticios y los mostré en formato de tabla.
Contiene búsqueda y filtrado de datos (debe considerar el conjunto de datos completo no basado en los datos de la página actual).
Paginación deshabilitada al mostrar los resultados de filtering/search . Aquí la función de búsqueda y filtering funciona bien en la primera página. Pero cuando traté de hacer una búsqueda/filtro en la segunda página, no muestra no data found en lugar de los resultados filtrados.
Cuando registro los resultados de la función de search/filter , muestra el resultado adecuado en la consola , pero no se muestra en la tabla.
No puedo solucionar el problema. Aquí está el enlace a codesandbox .
Su flujo de datos no es correcto. Repasemos juntos:
La paginación funciona correctamente, getPaginatedData obtendrá los datos adecuados para mostrar en su tabla. hasta ahora todo bien, pero cuando cambia la paginación de la página, getPaginatedData no se guardará en ninguna parte. este controlador solo devuelve los datos en la tabla y no hay ningún usuario para buscar en su nombre.
Para resolver el problema, recomiendo usar otra variable de estado con otro useEffect para controlar la paginación y los datos de la página (conducir para obtener los datos adecuados en la búsqueda).
Necesitas implementar algo como esto:
// rest of the codes ... const [currentPage, setCurrentPage] = useState(1); const [tableData, setTableData] = useState([]); useEffect(() => { const startIndex = currentPage * dataLimit - dataLimit; const endIndex = startIndex + dataLimit; const result = users.slice(startIndex, endIndex); setTableData(result)) }, [currentPage]) // rest of the codes ... Ahora, con cada cambio en el número de página (paginación), este useEffect activará y establecerá los datos adecuados para mostrar en la tabla, luego puede usar tableData en su filtro de búsqueda en lugar de los datos del usuario.