無法使用 setState 在 NextUI 中設定分頁元件的新頁面（ReactJS UI lib）

Question

我有一個狀態和分頁元件：

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

此 Pagination 的 onChange 事件具有當您單擊該頁面時當前頁面的參數。

我處理以下更改頁面的函數：

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

我使用了 2 個 console.log 來記錄資料。一項記錄 onChange 的參數，一項記錄使用 setPage 後的頁面狀態。這是我的控制台，當我單擊第 1 頁和第 2 頁時，當參數 e 跟隨 onChange 事件更改時，setPage 似乎不起作用，那麼當 e 更改時如何 setPage？

Answer 1

設定狀態不會立即發生，因此當您記錄頁面狀態時，狀態值尚未更新。如果您想在頁面值變更後登出，可以使用 useEffect 鉤子。

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