ウェイポイントに反応する最初の時間の後にsupressを呼び出す

Question

私のOnEnterコールバックで、より多くのデータを取得するためにAPI呼び出しを行っています。フェッチされたデータは、私が持っている要素の配列に追加されます。バックアップをスクロールすると、コンポーネントがビューポートに戻ったときにAPIコールが再度トリガされます。

これを回避する方法はありますか？

react waypoint

コードサンプル： さて、私は少しそれをクリーンアップしてみましょう：@jmeas

fetchData(props){ function to call the api with server side pagination 
    if(props.previousPosition != 'above') { //an attempt to check if we passed that waypoint, do not call the api again 
     this.setState({page: this.state.page + 1}, function() { //increment the page number 
     this.getCatalogItems(this.state.categoryId, this.state.page) //make api call with incremented page number 
      .then((res) => { 
      console.log("fetched more data with scroll", res) //results 
      }) 
     }) 
    }else{ 

     console.log("not calling fetch data") 
    } 
    } 

これは、私はウェイポイントを呼び出しています方法です：

class ProductContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log("catalog product container initialized", this.props); 
    } 



    render() { 

    const {catalogProducts, getCatalogItems, renderWaypoint} = this.props; 

    console.log("props in roduct container", this.props) 
    return (
     <div className="products-container"> 
       { 
       catalogProducts && catalogProducts['products'] ? 
        catalogProducts['products'].map((product) => { 
        return (
        <span> 
         HIIIIIIIIIIIIIIIIIIIIIIIIIII 
        <CatalogProduct product={product}/> 

         </span> 
       ) 
       }) 
        : 
        false 
       } 
       {renderWaypoint()} 

       ########################################################################### way point here ################################################ 
     </div> 

    ); 
    } 
} 

ProductContainer.propTypes = { 
    catalogProducts: React.PropTypes.any.isRequired, 
    getCatalogItems: React.PropTypes.func.isRequired, 
    renderWaypoint: React.PropTypes.func.isRequired 
}; 



export default ProductContainer; 

何私はしたい：

私は無限を持っているスクロールカタログページ。最初のAPIコールから返された商品をレンダリングした後、もう一度サーバーにラウンドトリップしてレンダリングしたいウェイポイントまでスクロールしたときに、apiコールを行いたいです。

Answer 1

あなたのコードのコードを見直さなくても...データがロードされたらフラグを作成してそれをtrueに設定したように見えますが、データをロードする前にそのフラグをチェックするだけです。おそらく最もエレガントな方法ではないかもしれませんが、うまくいくでしょう。

class SomeClass extends React.Component { 

    constructor(props) { 
     super(props); 
     this.data = []; 
     this.fetched = []; 
     this._loadPageContent = this._loadPageContent.bind(this); 
    } 

    render(){ 
     return (
      <Waypoint 
       key={cursor} 
       onEnter={this._loadPageContent(this.props.pageId)} 
      /> 
     ); 
    } 


    _loadPageContent(i) { 
     if(this.fetched.indexOf(i) <= -1){ 
      //go get the data 
      this.data.push(someApiCall()); 
      this.fetched.push(i); 
     } 
    } 
} 

export default SomeClass;