Javascript JS Filter/Map以获取

我正在尝试为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>
   );
 });

this.state.items.filter（（item，i）=>i>page&i<（page+12））.map（（item，i）=>{
返回(
{item.name}
);
});

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

---

我错过了什么。谢谢

正如异教徒猴子所提到的，你的数学是错的-你需要将页码乘以每页的项目数来得到你的开始索引，然后将每页的项目数与之相加来得到结束索引

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>
  );
});

const pageItems=12；
const beginIndex=pageItems*page；
//将最终指数限制在100
const endIndex=Math.min（100，beginIndex+pageItems）；
this.state.items.filter（（item，i）=>i>=beginIndex&&i{
返回(
{item.name}
);
});

正如异教徒猴子所提到的，你的数学是错的-你需要将页码乘以每页的项目数来得到你的开始索引，然后将每页的项目数与之相加来得到结束索引

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>
  );
});

const pageItems=12；
const beginIndex=pageItems*page；
//将最终指数限制在100
const endIndex=Math.min（100，beginIndex+pageItems）；
this.state.items.filter（（item，i）=>i>=beginIndex&&i{
返回(
{item.name}
);
});

好吧，你的数学算错了。如果

page

为0，它将显示1-11（因为1>0和11<12）。如果

page

为1，它将显示2-12，因为2>1和12<13。听起来你缺少了一个乘数。用

page*12

更改

page

的两个匹配项。好了，你的数学已经关闭了。如果

page

为0，它将显示1-11（因为1>0和11<12）。如果

page

为1，它将显示2-12，因为2>1和12<13。听起来您缺少一个乘数。用

page*12

更改

page

的两个匹配项。