React.js를 사용하여 1,000 개의 객체를 포함하는 배열을 매핑하는 경우에도 한 번에 25 개의 객체 만 화면에 렌더링하는 방법

Question

React와 Redux를 사용하고 있습니다.

내 구성 요소 중 하나에서 1000 개체를 포함하는 배열로 매핑하려고하지만 한 번에 25 개만 화면에 렌더링합니다.

사용자가 클릭 할 때 다른 25 개를 렌더링하는 버튼이 "이상로드"하는 것이 이상적입니다.

내 Redux 상태에서 데이터베이스 또는 아무것도 반환 된 결과를 제한하지 않으므로 1,000 개체가 포함 된 배열이 있으면 상관 없습니다. 렌더링 메서드를 제어하려고합니다.

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는 1,000 개체를 포함하는 배열입니다 :

는 여기가 내 구성 요소의 기본 렌더링 방식의 내부 호출 내 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> 
    ); 
}