如何实现MUI-Databables的服务器端分页？

Question

如何实现MUI-DataTable的服务器端分页？

问题：

我似乎无法检索用户在

rowsPerPage options

中选择的任何值。如果用户单击
• 15

  ，则应该更新这些内部

  rowsPerPage

  ：useEffect 服务器端分页和过滤器如何适用于MUI-DataTable？
  RECEREATED代码框：
Https：//codesandbox.io/s/mui-datatable-server-side-side-pagination-filtering-filtering-and-sorting-y8pyp7？file =/src/app.js：611-1091
很明显，在您的代码中的沙箱中，您有状态

const getUsers = async () => {
   const usersRef = collection(db, "users");
   const q = query(
     usersRef,
     orderBy("firstName", "asc"),
     limit(rowsPerPage)
   );
   const querySnapshot = await getDocs(q);
   const arr = [];
   querySnapshot.forEach((doc) => {
     arr.push({
       ...doc.data()
     });
   });
   if (isMounted) {
     setUsers(arr);
     setCount(arr.length);
     loading(true);
   }
 };

IDE强调了IDEconst [rowsPerPage, setRowsPerPage] = useState(10);

向您展示它从未使用过，因此即使用户更改了状态的值，状态未更新。

Answer 1

文档

显示有

setRowsPerPage

，您可以将回调传回去以更新状态，然后使用状态值发送到后端

我从（来自官方示例）中找到了例子：

在这里单击

有很好的例子如何处理分页 逻辑是：

您应该具有处理PAGESIZE的打页状态

即时更改更新更新PAGESIZE状态

Answer 2