解决分页问题

Question

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

如何解决这两个问题？

Answer 1

您需要对代码进行两项更改：

1. 在search功能中，您应该过滤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);
};

2. total的Pagination属性应动态定义，因此页面数与项目数匹配：

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