无法使用 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]);