过滤表数据仍然停留在同一页面答案

【问题标题】：filtering table data still stays at the same page过滤表数据仍然停留在同一页面
【发布时间】：2021-08-26 23:14:22
【问题描述】：

这里是新的 react 开发人员，这里我有带有过滤系统的 antd 表。我的问题是这样的：如果表中有很多数据，例如第 1 页第 2 页第 3 页（我的意思是）

例如，如果您单击第 3 页（在表格中），并且上面是过滤按钮，并且您单击其中一个按钮并向下滚动，您可以看到它仍然在第 3 页，如何在单击按钮时做到这一点应该总是自动转到第 1 页。我的代码： https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js

英语不是我的母语，所以可能会出错

【问题讨论】：

标签： javascript html reactjs typescript antd

【解决方案1】：

从表格文档https://ant.design/components/table/ 您可以将分页道具传递给您的表格。这意味着您可以将 onChange 和 current 传递给分页元素，以便在过滤时重置分页页面。

以下是如何使用状态管理页面的示例：

const [paginationPage, setPaginationPage] = useState(1);

return (
  <Table
    pagination={{
    current: paginationPage,
      onChange: (pageNum) => setPaginationPage(pageNum)
    }}
    dataSource={filteredEventsData}
    columns={tableColumns}
  />
)

您现在可以在任何地方重置当前页面：

setPaginationPage(youPageNumber);

https://codesandbox.io/s/nervous-banach-d7ff2?file=/src/Test.js

【讨论】：

这行得通，很好，我有一个与您的代码相关的问题，正如您所看到的，有过滤，当用户单击“交付中”按钮时，它应该显示所有状态为“ InDelivery'，在您的代码中显示其中 2 个是正确的，但是当我单击“订购”按钮时，它应该显示状态为“订购”的那些，但正如您所看到的那样，它显示“InDelivery”和“订购” '，虽然它应该只显示'订单'......解决这个问题的简单方法？单击按钮时，它应根据该过滤器按钮进行过滤，如果单击订单按钮，则仅应显示订单
这只是因为在示例数据中两行具有相同的键，这导致与数组反应多次显示某些行。只需更改其中一个的键，它就会正确显示
如果我更改了密钥，那么当我单击“交付中”按钮时它不起作用，如何使它可能有多个相同的密钥？因为表格状态可能有很多“交付中”，这就是为什么我有过滤器来显示所有“交付中”
或者你有没有办法使这成为可能，例如，如果点击“交货中”过滤器，那么可能有很多行状态为“交货中”
您必须对您的数据使用另一个属性。 ID 必须是唯一的，但您可以有一个名为 type 的道具，它不是唯一的，仅用于过滤。