javascript - 解决分页问题

Question

我有一个应用程序，我使用 React js 添加了分页功能。我还有搜索功能，也可以使用。当我转到第二页并删除该页面中的所有项目时，就会出现此问题。在我从页面中删除最后一个项目的那一刻，该页面应该转到上一页，但它仍然在没有任何项目的第二页上，但这应该是自动的。搜索也存在同样的问题。当我在第二页上搜索文本 first 时，结果在第一页上，但我在第二页上，或者在这种情况下，页面应该自动更改，我应该看到结果。

如何解决这两个问题？

Answer 1

您需要对代码进行两处更改:

1. 在您的搜索功能中，您应该过滤data而不是mydata，否则您的搜索不会在每次更新时重置:<

const search = e => {
  const v = e.target.value;
  const result = data.filter(i =>
  //             ^ This was `mydata`
    i.title.toLowerCase().includes(v.toLowerCase())
  );
  setMyData(result);
};

Pagination 的 total 属性应动态定义，以便页面数量与项目数量相匹配:

<Pagination
  defaultCurrent={1}
  defaultPageSize={9}
  onChange={handleChange}
  total={mydata.length}
  //     ^ This was hard-coded
/>