Estoy tratando de actualizar el estado del índice de la página en index.js desde el componente Paginación,
mi index.js:
import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const initialStatePage = () => 1; const [pageIndex, setPageIndex] = useState(initialStatePage); const { data } = useSWR(`http://1.2.3.4/api/console?pagination[page]=${pageIndex}`, fetcher, {fallbackData: data}); return ( <> <h1> {data} <h1/> <Pagination pagenow={initialStatePage}/> <> ); }; export default Index;mi componente:
import { useState } from 'react'; const Pagination = ({ pagenow }) => { const [pageIndex, setPageIndex] = useState(pagenow); return ( <> <li> <button onClick={() => setPageIndex(pageIndex - 1)}> </button> </li> <button onClick={() => setPageIndex(pageIndex + 1)}> </button> </li> </> ) }; export default Pagination;pero después de hacer clic, el índice de la página no se actualiza desde mi componente
El estado en su componente de Pagination volverá a representar el elemento secundario, no la página completa. Si desea que vuelva a representar toda la página Index , pase su función setPageIndex al componente y utilícela para establecer el índice de la página:
index.js
import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const initialStatePage = () => 1; const [pageIndex, setPageIndex] = useState(initialStatePage); const { data } = useSWR(`http://1.2.3.4/api/console?pagination[page]=${pageIndex}`, fetcher, {fallbackData: data}); return <> <h1>{data}</h1> <Pagination pagenow={initialStatePage} setPageIndex={setPageIndex} /> <>; }; export default Index; Pagination component file
import { useState } from 'react'; const Pagination = ({ pagenow: pageIndex, setPageIndex }) => { return <> <li> <button onClick={() => setPageIndex(pageIndex - 1)}></button> <button onClick={() => setPageIndex(pageIndex + 1)}></button> </li> </>; }; export default Pagination;