Question

所以我正在学习反应和js，我试图循环每20个（单页中的限制）并显示这些图片，也显示在底部这个页面索引使用bootstrap。但它并没有真正起作用这是我的代码：

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 diff引擎可以正常完成其工作 - 关键需要唯一标识实际的，所以你不能使用数组位置（['a'，'b']和['b'，'a']是相同的数组，但如果你假装数组位置是一个关键，而不是“只是交换这两个元素”你说谎的是从一个到另一个发生的事情，声称实际的内容发生了变化，当他们没有，事情变得非常低效。）

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

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

1 个答案: