检索具有指定项目金额和偏移量的数据时,第二页和后续页面上会出现显示问题.

例如,在第一页上,数据正确地显示了前10项.但是,当使用分页来访问下一组项目时,尽管提取的数据包含数组中的10个项目,但只返回不同数量的项目:

https://codesandbox.io/s/listing-pokemon-on-datagrid-76w3v5

取数函数:

const fetchPokemon = async (limit, offset) => {
  const response = await fetch(
    `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`
  );
  const data = await response.json();

  // this returns 10 items
  console.log(data);

  const returnedValues = {
    results: data.results,
    count: data.count
  };

  return returnedValues;
};

数据网格组件:

<DataGrid
    autoHeight
    columns={cols}
    loading={dataGridState.loading}
    rowCount={dataGridState.amount}
    rows={pokemon}
    pagination={{
      pageSize: dataGridState.pageSize,
      page: dataGridState.offset - 1
    }}
    pageSize={dataGridState.pageSize}
    onPageChange={handlePageSize}
    onPaginationModelChange={async (val) => handlePageSize(val)}
  />

enter image description here

推荐答案

您正在使用服务器端分页,这意味着您将从远程源获取数据并在服务器上处理分页逻辑.因此,您需要将值为serverpaginationModeprops 传递给DataGrid组件.这告诉组件不应在内部处理分页,而应将其委托给服务器.

例如:

<DataGrid
  {...restProps}
  paginationMode="server"
/>

您可以在这里看到整个示例:codesandbox.io.

要了解更多信息,请参阅Server Side Pagination Docs.

根据该文档:

  • 将props paginationMode设置为server
  • 提供rowCount个props ,让数据网格知道有多少页
  • 使用onPaginationModelChange属性回调在页面更改时加载行

附注:你用dataGridState.offset作为page.这是不对的. 相反,您需要使用dataGridState.offset / dataGridState.pageSize + 1作为page.

Reactjs相关问答推荐

是否可能有不同的加载器用于路径有查询参数和没有查询参数,或者在React Router 6中添加它们时有条件地跳过一个加载器?

Next.js:提交表单时状态尚未就绪

在继承值更改时重置react 挂钩窗体字段值

是否为Reaction中未使用的组件生成Tailwincss样式?

onClick 事件处理程序未应用于样式组件

如何在不同的路由中渲染相同的页面组件(包括 getServerSideProps)

如何将 npm 包添加到我的 Vite + React 应用程序中?

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

解决在React测试库中的act()警告

React 应用程序可以嵌入到 PowerPoint 中吗?

为什么我的 Next.js (React) 组件只有在页面中时才有效?

MUI TextField Select 菜单的最大高度

null 不是对象(判断RNSound.IsAndroid)

在 React 中将路径与查询变量匹配

使用 yarn 编译 protobuf js 时出现错误pbjs: command not found

NextJs - 如何从站点 map 生成器中删除重复的 URL?

哪个 PrivateRouter 实现更好:高阶组件还是替换?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行

服务器端分页未按预期工作

Cypress 中的 process.env 空对象