react中InfiniteScroll插件的使用

import React, { Component } from 'react';
import * as echarts from 'echarts';
import GaugeInBox from  "./GaugeInBox";
import { Icon, Input, Button} from 'antd';
import InfiniteScroll from 'react-infinite-scroller'
import classNames from 'classnames';
const InputGroup = Input.Group;
const Search=Input.Search;

export default class GaugeBox extends Component {
  constructor(props) {
      super(props);
      this.state={
        searchText: '',
        focus: false,
        result:'',
        hasMore:true,
        pageSize:3//每次加载几个拌站下的小组件
      };
      this.handleInputChange=this.handleInputChange.bind(this);
      this.handleFocusBlur=this.handleFocusBlur.bind(this)
      this.handleSearch=this.handleSearch.bind(this)
      this.loadMoreData=this.loadMoreData.bind(this)
  }
  handleInputChange(e) {
    this.setState({
      searchText: e.target.value,
    });
  }
  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  }
  handleSearch() {
    console.log(this.state.searchText)
    if(this.state.searchText){
      this.loadSearchData()
    }else{
      this.loadMoreData(1)
    }
  }
  loadSearchData(){
    let myData=this.filterTree(this.props.data,this.state.searchText)
    let result=myData.map((items,index1)=>{
        return <div className="GaugeInBox" key={index1}>
            {/*<div className="YunBoxHr">{items.name}</div>*/}
            <GaugeInBox changeDevicetype={this.props.changeDevicetype} data={items.children} index={index1}/>
            </div>
    })
    this.setState({
        hasMore:false,
        result:result
    })
  }
  loadMoreData(page){
    console.log(11111111111111,page)
    if(!page){
      return false;
    }
    let startIndex=(page-1)*this.state.pageSize;
    let endIndex=page*this.state.pageSize-1;
    let myData=this.filterTree(this.props.data,this.state.searchText)
    let result=myData.map((items,index1)=>{
        if(((index1<endIndex||index1==endIndex))){
           return <div className="GaugeInBox" key={index1}>
            {/*<div className="YunBoxHr">{items.name}</div>*/}
            <GaugeInBox changeDevicetype={this.props.changeDevicetype} data={items.children} index={index1}/>
            </div>
        }
    })
    if(myData.length>endIndex+1){
      this.setState({
        hasMore:true,
        result:result
      })
    }else{
      this.setState({
        hasMore:false,
        result:result
      })
    }
  }
  componentDidMount(){
      // 在组件一挂载的时候就去请求商品列表数据
      this.loadMoreData();
  }
  filterTree(nodes, query){
          // 条件就是节点的title过滤关键字
          let predicate = function (node) {
            console.log(node.name)
            if (node.name&&node.name.includes(query)) {
              return true;
            } else {
              return false;
            }
          };

          // 结束递归的条件
          if (!(nodes && nodes.length)) {
            return [];
          }
          let newChildren = [];
          for (let node of nodes) {
            //一、带父节点     以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
            // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
            // 2. 自己本身符合条件
            let subs = this.filterTree(node.children, query);
            if (predicate(node)) {
              newChildren.push(node);
            } else if (subs && subs.length) {
              node.children = subs;
              newChildren.push(node);
            }

            //二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
            // if (predicate(node)) {
            //   newChildren.push(node);
            //   node.children = this.filterTree(node.children, query);
            // } else {
            //   newChildren.push(...this.filterTree(node.children, query));
            // }
          }
          return newChildren.length ? newChildren : [];
  }
  render() {
   
    return <div style={{height:"100%"}}><div><Search className='searchInput'
                            ref={input=>this.searchRef=input}
                            value={this.state.searchText}
                            allowClear={true}
                            placeholder='模糊搜索'
                            onChange={this.handleInputChange}
                            onFocus={this.handleFocusBlur} 
                            onBlur={this.handleFocusBlur}
                            onPressEnter={this.handleSearch}
                            onSearch={this.handleSearch}
                    /></div> 
          <div className="InfiniteScrollBox" style={{height:"100%",overflow: "auto"}}> 
          <InfiniteScroll
              loadMore={this.loadMoreData}
              hasMore={this.state.hasMore}
              useWindow={false}
              loader={<div className="loader" key={0}>Loading ...</div>}
              pageStart={0}
            >{this.state.result} 
          </InfiniteScroll>
          </div> 
    </div>
  }
}