React Search 标题结果和 Pagination Material UI答案

【问题标题】：React Search title result and Pagination Material UIReact Search 标题结果和 Pagination Material UI
【发布时间】：2021-09-15 16:59:18
【问题描述】：

我能够检索数据列表并从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 中进行研究时，我需要合并分页的数据过滤数据，我现在遇到的问题是我无法对过滤的数据进行分页，但分页正在使用我的初始数据列表。

【问题讨论】：

标签： javascript reactjs pagination material-ui codesandbox

【解决方案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"
   />

【讨论】：