React中的状态管理和分页

Question

我正在构建一个简单的应用程序，该应用程序从API调用100个用户，并将他们显示在网格中。我有性别过滤器和用户名搜索输入。我还添加了分页，以便每页显示20个用户。我将currentData和分页函数的props传递给子组件(Feed(

我的问题是：当我在输入中搜索用户名时，分页很强，给人的印象是没有匹配的用户，但当你导航到第4页或第5页时，如果他们存在，就会出现。

此处的相关代码：

App.js
//
const [currentPage, setCurrentPage] = useState(1);
const [usersPerPage, setUsersPerPage] = useState(20);
const paginate = (number) => setCurrentPage(number);
const lastUserIndex = currentPage * usersPerPage;
const firstUserIndex = lastUserIndex - usersPerPage; 
const currentData = data?.slice(firstUserIndex, lastUserIndex);
Feed.js
//
if (username.length >= 1) {
setUsersPerPage(100)
} else {
setUsersPerPage(20)}

我最初的想法(如上(是将所有用户设置在一个页面上，以确保用户名过滤器会拾取我数据中的所有用户并将其显示在一个网页上。然而，控制台中会抛出一个警告(与此相同https://github.com/facebook/react/issues/18178#issuecomment-595846312(，因为当页面第一次加载时，它同时在App.js和Feed.js中设置usersPerPage。我尝试将所有分页功能迁移到Feed.js，但在传递道具时出现了问题。

如果有任何帮助或逻辑来解决这个问题，我们将不胜感激！

Answer 1

基于您在评论中链接的沙盒，我认为您需要重新思考您的组件流。

似乎没有必要在应用程序组件中调用您的API。相反，在Feed组件中调用它。这将使事情更容易跟进，并将您的担忧分开。

我看到的另一个问题是，您的分页组件与总用户数量耦合，而不是与您在Feed组件中显示的用户数量耦合。

您的分页组件应该是动态的，并且基于您想要显示的用户总数。分页的逻辑应该可以看出，您正试图显示超过页面限制(即25(的内容并创建新页面。

您可以通过多种方式来实现这一点，但脑海中浮现的一个简单方法是创建一个"pages"的状态数组，并具有一个函数，该函数使用少于25个元素的嵌套数组来更新页面状态。

然后你可以有这样的东西：

const [pages, setPages] = [];
const pageLimit = 25;
const updatePages = (users) => {
let nPages = [];
// break up user array into chunks of page limits
for (let i = 0; i < users.length; i+= pageLimit) {
nPages.push(users.slice(i, i + pageLimit))
}
setPages(nPages);
}

现在您有了一个需要显示的所有页面的数组。因此，当您添加一个筛选器并仅使用一个用户调用updatePages时，您的组件可以知道只有一个页面可以显示，并且该页面上只有一个用户。

这只是你如何重新思考这个问题的一个例子。但关键在于，您需要将分页与所呈现的内容相结合，而不是从最初的API调用中检索到多少项。