無限スクロールでデータをフィルタリングする方法は？ React Redux

Question

無限スクロールでデータをフィルタリングする方法は？ページがロードされる最初の時間は -

があり、私はクライアント側でフィルタリングする場合は>サーバーからデータをフェッチ（のみ16項目）{limit: 16, offset: 0}

は、だから私は唯一の16項目をフィルタすることができます（しかし、私は、全体のデータを必要とします）どのように無限のスクロールでそれを達成する方法？ここで
私の機能は

_loadMore =() => { 
    this.setState({loadingMore: true}); 
    this.props.getSaloons({limit: 16, offset: this.props.saloons.length}); 
    setTimeout(() => { 
     this.setState({loadingMore: false}); 
    }, 1000); 
    }; 

SQLクエリ 'SELECT * FROM stories LIMIT $1 OFFSET $2'

バックエンドです：ExpressJS + PostgreSQLの

Answer 1

は最初1に設定されている状態でcounter変数を持っています。これは、基本的にどれだけのデータをロードする必要があるかを計算します。

ので_loadMoreはthis.props.getSaloons({limit: 16 * this.state.counter, offset: 0});

のようなものを持っている必要があります。そして、あなたが次に呼び出されます。このcalcScrollメソッドを定義componentDidMountに追加し、componentWillUmount

componentDidMount() { 
     window.addEventListener('scroll', this.calcScroll, 10); 
    } 

componentWillUnmount() { 
    window.removeEventListener('scroll', this.calcScroll); 
} 

に削除されscrollHandlerを追加する必要があります_loadMore

calcScroll(){ 

    //This height need not be 300, you need to play around with values to get a suitable one 
    if(window.scrollY > this.state.counter * 300){ 
     this.setState({counter:this.state.counter+1},()=>this._loadMore()) 
    } 
} 

基本的には、この場合はポイント（this.state.counter * 300）を超えてスクロールすると、カウンターとコールを更新します_loadMore