React-infinite-scroll - 错误:未捕获TypeError:this.getDOMNode不是函数(...)

时间:2016-11-07 05:38:31

标签: javascript reactjs

我尝试实现react-infinite-scroll,它应该首次渲染10个元素,然后在滚动时它应该加载更多元素,这是我的代码

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InfiniteScroll from 'react-infinite-scroller';

var App=React.createClass({

    getInitialState(){
        var a=[];
        for(var i=0;i<300;i++){
            a.push(i);
        }
        return ({ data:a,entry:[],hasMoreItems: true,start:1,end:50 })
        },

     loadItems: function(page) {
        this.setState({entry:this.state.data.slice(this.state.start,this.state.end)});
        console.log("entry state",this.state.entry);    
        if(this.state.data.length==this.state.end){
            this.setState({hasMoreItems:false})
        }
        this.setState({start:this.state.start+50});
        this.setState({end:this.state.end+50});
        },

    render(){
        var items = [];
        this.state.entry.map((track, i) => {
            items.push(
                <div className="track" key={i}>
                    <div key={i}>HI {i}</div>
                </div>
            );
        });

        console.log("items",items)

        return(

        <InfiniteScroll
        pageStart={0} 
        loadMore={this.loadItems} 
        hasMore={this.state.hasMoreItems} 
        loader={<div className="loader">Loading ...</div>} 
        >
  <div>
  {items}
        </div> 
</InfiniteScroll>
        )
    }
});

ReactDOM.render(
    <App />
, document.getElementById('root'));

滚动时条目状态正在改变,但组件不再渲染它只显示前50个数据。

请帮助

0 个答案:

没有答案