React.jsを使用して1000個のオブジェクトを含む配列にマッピングしていても、一度に25個のオブジェクトだけをスクリーンにレンダリングする方法

Question

ReactとReduxを使用しています。

私のコンポーネントの1つでは、1000個のオブジェクトを含む配列にマップしたいが、一度に25個しか画面にレンダリングしない。

また、ユーザーがクリックすると別の25を表示する「もっと読み込み」というボタンがあることが理想的です。

私のRedux状態では、1000個のオブジェクトを含む配列があるので、データベースなどから返された結果を制限したくないので気にしません。レンダリングの方法をコントロールしたいだけです。

renderProducts() { 

     return this.props.allProducts.map(product => { 
     return (
      <div key={product._id} className="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="productThumbnail"> 
      <SingleProduct 
       key={product._id} 
       product={product} /> 
      </div> 
     ); 
     }); 
} 

this.props.allProductsが1000個のオブジェクトを含む配列です：

は、ここで私は私のコンポーネントのメインrenderメソッドの内部で呼び出して、私のrenderProducts（）メソッドです。私は一度に25をレンダリングするだけで、毎回画面上の数字を25ずつ増やすボタン用の関数を実装することはできますか？

Answer 1

この点についてはどうですか？この関数は一般的なものです。あなたはredux状態の現在のページとpageSizeにある商品の配列を渡します。これはページあたりのアイテム数です。 UIを追加し、ストアを拡張して、ページやページサイズを状態に保つ必要があります。最終的には、this.props.allProductsのようなコンポーネントのthis.propsから利用できるようになります。

renderProducts(allProducts = [], page, pageSize) { 
    const startIndex = page * pageSize; 
    const endIndex = Math.min(page * pageSize + pageSize, allProducts.length); 

    const viewProducts = allProducts.slice(startIndex, endIndex); 

     return viewProducts.map(product => 
     <div 
      key={product._id} 
      className="col-lg-3 col-md-3 col-sm-3 col-xs-6" 
      id="productThumbnail" 
     > 
      <SingleProduct 
      key={product._id} 
      product={product} 
      /> 
     </div> 
    ); 
}