javascript - React Search 标题结果和 Pagination Material UI

Question

我能够检索数据列表并从 todos 列表中搜索标题名称

这是我做的原型(prototype)=> 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 上应用的相同逻辑得到currentTasks在 filteredData 上.

我在 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"
   />