javascript - JS Filter/Map 获取之间的对象

Question

我正在尝试为 ReactJS 项目中的对象数组创建一个分页器。我有一个组件通过正在显示的对象的“页面”来更改状态。

我正在尝试使用过滤器来获取两个数字(开始和限制)之间的对象总数

我的代码:

this.state.items.filter((item,i) => i > page && i < (page + 12)).map( (item, i) => {
   return(
     <div className="col-lg-3 mb-4" key={i}>
         <div>{item.name}</div>
     </div>
   );
 });

items 数组中有 100 个项目，页面最初设置为 0，这应该将过滤器评估为 i > 0 && i < 12(我成像为 0-11)。这似乎有效......但是当我单击第二个“页面”时，它应该显示 i > 12 && i < 24 (我的图像是 12-23)，但它没有按照我预期的方式过滤。

我错过了什么。谢谢!

Answer 1

正如 Heretic Monkey 提到的，你的数学是错误的 - 你需要将页码乘以每页的项目数以获得开始索引，并将每页的项目数添加到该索引中以获得结束索引。

const pageItems = 12;
const beginIndex = pageItems * page;
// Cap the end index at 100
const endIndex = Math.min(100, beginIndex + pageItems);

this.state.items.filter((item, i) => i >= beginIndex && i < endIndex).map((item, i) => {
  return (
    <div className="col-lg-3 mb-4" key={i}>
      <div>{item.name}</div>
    </div>
  );
});