react-infinite-scoller loads data more

问题内容:

I’m using react-infinite-scoller version 1.1.1 from NPM.
The issue is that the scoller loads around 4 pages while i only want to load the first. One page of 10 panels will fill the entire screen and a little more. I have tried using both clear:both and set height/minHeight but i can not get the result I want unless i set the height to a very large value(around 1000px) which makes the bottom very large.

<InfiniteScroll
               pageStart={0}
               loadMore={this.loadItems}
               hasMore={this.state.hasMore}
               useWindow={true}
               loader={<div className="loader" style={{clear:'both', height:100}}>Loading ...</div>}
             >
              <div style={{clear:'both', minHeight:100}}>{logs}</div>
 </InfiniteScroll>

The logs i want to display are a list of panels:

<Panel key={index} bsStyle={row.status == "ONGOING" ? 'danger' : 'default'} header={row.status == "ONGOING" ? 'ACTIVE ALARM' : ''}>

            <ul>
              <li>
                  Alarm type: {row.type}
              </li>
              <li>
                  Alarm Status: {row.status}
              </li>
              <li>
                  Time started: {moment(row.timeStart).format('LLL')}
              </li>
              <li>
                  Duration: {moment.duration(row.timeEnd-row.timeStart).humanize()}
              </li>
              <li>
                  Details: {row.details}
              </li>
            </ul>

          </Panel>

To load the data I use two function one loadItems and getAlarmLog. The last one is getting a json object and returns a promise. The promise is forwarded in the loadItems.

loadItems(page){
    var nextState = {
     // set next state with the new page
    };
    return this.getAlarmLog(nextState);
  }


  getAlarmLog(state){

    return new Promise((resolve, reject) => {
      const obj = {page,pageSize}; // get page and pageSize from state
      $.ajax({
        type: 'GET',
        url: `logs`,
        data: obj,
        dataType: 'json',
        xhrFields: {
          withCredentials: true,
        },
        cache: false,
        context: this,
        success(alarmLogs) {
          resolve(alarmLogs);
        },
        error(err) {
          reject(err);
        },
      });
    })
    .then((result)=>{
      // add the new data to state
    });
  }

I’m aware that the issue is very likely a misunderstanding of how to use clear:’both’ or the min height in this context. I have tried to wrap the infinite scroller in a div tag with both heigth and clear set.

问题评论:

原文地址:

https://stackoverflow.com/questions/47754235/react-infinite-scoller-loads-data-more

添加评论

友情链接:蝴蝶教程