ReactJs : 더 많은 페이지 매김 유형로드 (추가)

Question

저는 ReactJS를 처음 접했고 내가 작업하고있는 한 가지는 페이지 매김입니다. ReactJS는 복잡한 UI보기를 만드는 훌륭한 도구이지만 때로는 가장 간단한 방법이 가장 어렵습니다. jQuery에서 할 수 있지만 React를 사용하여 수행하려고합니다.

기본적으로, 항목이 본문에 추가되는 (예 : 뉴스 피드) 페이지 매김의 "추가로드"스타일을 갖고 싶습니다. 내 코드에서 데이터를 가져 와서 상태 변수에 넣은 다음 DOM을 렌더링하라는 아약스 요청을한다. 항목에 대한 새 변수를 만들었 기 때문에 데이터 한 페이지만으로이 작업을 성공적으로 완료했습니다.

onCallSuccessGetListings: function(data) { 
    this.setState({ hasSuccess: data.success }); 

    if(data.success !== false) { 
     this.setState({ 
      hasSuccess: JSON.parse(data).success, 
      newListings: false 
     }); 

     if(this.props.hasClickedPagination) { 
      this.setState({ 
       newListings: JSON.parse(data).result 
      }); 
     } else { 
      this.setState({ 
       listings: JSON.parse(data).result 
      }); 
     } 
    } 
}, 

기본적으로 사람이 "추가로드"를 클릭 한 다음 새 변수를 사용하여 데이터를 저장합니다. 다음은 렌더링 기능 : 당신이 볼 수 있듯이

render: function() { 
    var markup = [], 
     nextMarkup = []; 

    if(this.state.hasSuccess) { 
     markup = Object.keys(this.state.listings).map(function(value){ 
      return (
       <div className="property__item" key={value}> 
        blablabla 
       </div> 
      ) 
     }, this) 

     if(this.state.newListings !== false) { 
      nextMarkup = Object.keys(this.state.newListings).map(function(value){ 
       return (
        <div className="property__item" key={value}> 
         blablabla 
        </div> 
       ) 
      }, this) 
     } 
    } else { 
     markup.push(<p key="1">No results</p>) 
    } 

    return (
     <div className="property__list--grid"> 
      { markup } 
      { nextMarkup } 
     </div> 
    ); 
} 

, 내가 코드를 복제하고있어 나는 "반작용"스타일을 그것을 할 수있는 방법을 찾을 수 없습니다. 사용자가 "Load More"를 10 번 이상 클릭 할 때 10 개의 변수를 생성하고 싶지 않습니다.

누구든지 도움을받을 수 있다면 좋을 것입니다. 나는 해결책을 생각할 수 없어 며칠 동안 나를 괴롭혔다.

감사합니다.

Answer 1

"결과 페이지"마다 새 상태 변수를 만들 필요가 없습니다. 무한 스크롤 결과 세트를 수행 중이며 onCallSuccessGetListings이 구성 요소 내에 있다는 것을 확인합니다.

결과의 새 페이지에 대한 새 변수를 만드는 대신 새 변수를 기존 변수에 추가하십시오. 예 :

onCallSuccessGetListings: function(data) { 
    var jsonData = JSON.parse(data); 

    this.setState({ 
     hasSuccess: jsonData.success, 
     listings: jsonData.success 
     ? this.state.listings.concat(jsonData.result) 
     : this.state.listings 
    }); 
}, 

당신이 당신의 초기 상태가 { listings = [] } (https://facebook.github.io/react/docs/component-specs.html#getinitialstate)로 설정합니다.

위의 코드는 상태가 설정 될 때마다 구성 요소에 대한 업데이트를 트리거 한 다음 결과를 간단하게 반복 할 수 있습니다. 나는 또한 당신이 state.hasSuccess 깃발을 사용하는 방법을 새롭게하는 것을 고려할 것입니다. 오류가 발생했는지 여부를 나타내는 데 오히려 사용해야한다고 생각합니다. 여기에() 메소드를 렌더링 개정 :

render: function() { 
    var markup = []; 
     hasSuccess = this.state.hasSuccess, 
     listings = this.state.listings; 

    if(!hasSuccess) { 
     markup.push(<div>An error occurred.</div>); 
    } else if (listings.length > 0) { 
     markup = Object.keys(listings).map(function(value){ 
      return (
       <div className="property__item" key={value}> 
        blablabla 
       </div> 
      ) 
     }, this) 
    } else { 
     markup.push(<p key="1">No results</p>) 
    } 

    return (
     <div className="property__list--grid"> 
      { markup } 
     </div> 
    ); 
} 

Answer 2

This tutorial 반작용에 매겨진 목록을 구현하는 데 모두 도움이 될 수 있습니다. 목록 자체와 백엔드에서 페이지가 매겨진 목록의 다음 하위 집합을 가져 오는 데 사용되는 자세히 버튼이 있습니다. 자습서의 백엔드는 이미 제공됩니다. 나는 그러한 기능을 구현하고자하는 사람들을 돕기를 바랍니다.