反应无限滚动无法正常工作

时间:2018-06-14 06:23:38

标签: reactjs pagination infinite-scroll react-infinite

我使用react infinite scroll component作为我的项目,由于某种原因,它在第一次滚动后无法正常工作。

首次尝试在内部调用API' componentDidMount()'在API调用InfiniteScroll之后。

constructor(props) {
        super(props);
this.state = {
            history : {
                'campaign_id': '',
                'bid_filter': '',
                "msisdn": localStorage.getItem("mobile"),
                "offset": 0
            },
            offset:0,
            hasMore: true,
} 

componentDidMount(){       
        this.props.dataList(this.state.history); //API 
    }

history是我想通过网络服务发送的数据集。第一次我在构造函数中发送history。滚动后我更新{{1在} history.offset and state.offset内部并调用API。

fetchMoreData()

在操作文件中,我检查当前偏移量和先前数据集的连接响应数据集,并将其分配给组件。

 fetchMoreData = () => {
     const { games } = this.props;
     this.setState(prevState => ({
            history: {
                ...prevState.history,
                offset: this.state.offset + LIMIT 
            }            
            }));
            this.setState({ offset: this.state.history.offset})
           this.props.dataList(this.state.history);  //API 
    }


<InfiniteScroll                        
       dataLength={games.data.count}
       next={this.fetchMoreData.bind(this)}
       hasMore={true}
       loader={<p className="loading-txt">Loading...</p>}
       >
        <Table hover>
           <thead>
             <tr>
               <th>{STRING.VALUE}</th>
               <th>{STRING.TIME}</th>
              </tr>
                  </thead>
                    <tbody>
                        {this.gameBody()} 
                    </tbody>
                </Table>
      </InfiniteScroll>

0 个答案:

没有答案