配列内の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>; 

あなたはオンザフライ要素に反応する配列を構築している場合、彼らが反応差分エンジンが適切に仕事をすることができるようにkey属性を持っている必要があること注 - キーニーズ一意に識別するために、実際のものなので、配列の位置（['a'、 'b']と['b'、 'a']）は同じ配列ですが、配列の位置がキー実際にコンテンツの変更が行われなかったときに発生したと主張し、状況がひどく非効率的になると主張している。

配列に要素を追加するときに+=を使用しようとしました。これは不正な構文です。+=は文字列連結です。配列に個々の要素を追加するには、array.pushを使用します（または、何か変なことが必要な場合はarray.splice）