如何使用無限滾動篩選數據？ React Redux

如何使用無限滾動過濾數據？頁面加載時第一次 - >從服務器獲取數據（僅16項）{limit: 16, offset: 0}如何使用無限滾動篩選數據？ React Redux

所以，如果我將在客戶端過濾我只能篩選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的

來源

2017-05-14 Андрей Гузюк

有其最初設置爲1狀態的counter變量。這基本上計算需要加載多少數據。

所以_loadMore應該有類似this.props.getSaloons({limit: 16 * this.state.counter, offset: 0});

然後你就必須添加一個scrollHandler其中添加上componentDidMount和刪除componentWillUmount

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

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

然後定義這個calcScroll方法，將調用_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

來源

2017-05-14 11:22:26 mrinalmech

如何使用無限滾動篩選數據？ React Redux

回答

相關問題