如何使用无限滚动筛选数据？ 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

回答

相关问题