Tidak dapat menetapkan halaman baharu komponen penomboran dalam NextUI menggunakan setState (lib UI ReactJS)

Question

Saya mempunyai komponen status dan penomboran:

const [page, setPage] = useState(1);
----------------------------------------------------------------------------------------
<Pagination
  color="primary"
  size="sm"
  total={30}
  onChange={handleChangePage}
  className="mb-20"
/>

Acara onChange Penomboran ini mempunyai parameter untuk halaman semasa apabila anda mengklik padanya.

Saya mengendalikan fungsi berikut yang mengubah halaman:

const handleChangePage = (e) => {
    console.log('data',e)
    setPage(e);
    console.log('page', page)
  };

Saya menggunakan 2 console.logs untuk merekod data. Satu merekodkan parameter onChange, dan satu lagi merekodkan status halaman selepas menggunakan setPage. Ini adalah konsol saya, apabila saya mengklik pada halaman 1 dan halaman 2, setPage nampaknya tidak berfungsi apabila parameter e berubah berikutan peristiwa onChange, jadi bagaimana saya boleh setPage apabila e berubah?

Answer 1

Menetapkan keadaan tidak berlaku serta-merta, jadi apabila anda merekodkan keadaan halaman, nilai keadaan masih belum dikemas kini. Jika anda ingin log keluar selepas nilai halaman berubah, anda boleh menggunakan cangkuk useEffect.

useEffect(() => {
  console.log('page', page);
}, [page]);