如何循环数组中的每 20 个位置

Question

所以我正在学习 react 和 js，并且我尝试每 20 次循环（单个页面中的限制）并显示此图片，还使用引导程序在此页面索引的底部显示。但它并没有真正起作用这是我的代码：

const pictureItems = this.state.imgFiles.map((img, index) => {
  return (
    <PictureListItem
      id={index}
      key={`img-${img.name}`}
      imgFile={img}
      pictureDataUpdate={this.onUpdatePicture}
    />
  );
});
const pageNumber = this.state.imgFiles.length / 20;
let pages = "";
for (let i = 0; i < pageNumber; i++) {
  pages += <li><a>{i}</a></li>;
  return pages;
}

我在想可能是我可以将索引的值传递给循环并乘以 20 作为开始，然后将 20 添加到结束。但我什至无法让页面很好地显示。

Answer 1

protip：不要自己做语言本身已经做的事情。

const picturesPerPage = 20;
const images = this.state.imgFiles;

...

// get the current page, rounded down. We don't want fractions
let currentPageNumber = (images.length / picturesPerPage)|0;

// find the start and end position in the "images" array for this page
let start = currentPageNumber * picturesPerPage;
let end = (1+currentPageNumber) * picturesPerPage;

// cool: make JS get those items for us, and then map those items to bits of JSX
let pages = images.slice(start, end).map(img => {
  return (
    <li key={img.src}>
      <a href={img.href}>
        <img src={img.src} alt={img.alt}/>
      </a>
    </li>
  );
});

// and we're done.
return <ul>{ pages }</ul>;

请注意，如果您正在构建一个动态 React 元素数组，它们需要有一个 key 属性，以便 React 差异引擎可以正确地完成它的工作 - 关键需要唯一地标识实际事情，所以你不能使用数组位置（['a'，'b']和['b'，'a']是同一个数组，但是如果你假装数组位置是一个键，而不是“只是交换这两个元素”你在谎称从一个元素到另一个元素会发生什么，声称实际的内容更改发生了，而实际上它们没有发生，事情变得非常低效）。

还请注意，您尝试使用 += 将元素添加到数组中 - 这是非法语法，+= 是字符串连接。要将单个元素添加到数组中，请使用 array.push（或者如果您需要一些奇怪的东西，array.splice）