React Search 标题结果和分页 Material UI

Question

我能够检索数据列表并从 todos

列表中搜索标题名称

这是我做的原型=> https://codesandbox.io/s/silly-firefly-7oe25

在演示中您可以看到 App.js

中的 2 个工作案例

<Tasks tasks={currentTasks} loading={loading} /> // it works with Pagination
<Tasks tasks={filteredData} loading={loading} />  // It filters por title, result not paginated

当我在我的 inputType 中进行研究时，我需要合并分页的数据 filteredData，我现在遇到的问题是我无法对过滤的数据进行分页，但分页正在处理我的初始数据列表。

Answer 1

这是基于您提供的沙箱的解决方案：

https://codesandbox.io/s/so-68247206-bshhd?file=/src/App.js

我所做的只是应用您在 tasks 上应用的相同逻辑，以在 filteredData 上获得 currentTasks。

我将这个逻辑抽象到 App 组件上的这个函数：

function getCurrentTasks(tasks) {
    const indexOfLastTask = currentPage * tasksPerPage;
    const indexOfFirstTask = indexOfLastTask - tasksPerPage;
    return tasks.slice(indexOfFirstTask, indexOfLastTask);
  }

然后，我只需要在将 filteredData 作为 prop 传递给 <Tasks/> 时将其传递给此函数：

<Tasks
    tasks={getCurrentTasks(filteredData)}
    loading={loading}
  />

最后，我根据过滤后的数据更新了传递给 <Pagination /> 组件的页数：

<Pagination
     className={classes.paginationContainer}
     onChange={handlePageChange}
     count={Math.ceil(filteredData.length / tasksPerPage)}
     page={currentPage}
     color="primary"
   />

React Search 标题结果和分页 Material UI

React Search title result and Pagination Material UI

javascript

pagination

reactjs

material-ui

codesandbox