JS过滤器/映射以获取对象之间的位置

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> &&I <12(I 成像为 0-11(。这似乎有效....但是当我单击第二个"页面"时，它应该说我> 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>
);
});