loadMoreRows未加載調用

我使用Table執行InfiniteLoader以下示例。問題是loadMoreRows未在加載或裝入組件時調用。但是，如果手動執行API調用並通過props傳遞結果，則將使用startIndex 0調用loadMoreRows，因此我有兩次相同的API調用。loadMoreRows未加載調用

import React = require('react'); 
import _ = require('lodash'); 
import Immutable = require('immutable'); 
import Api = require('./Api'); 

const STATUS_LOADING = 1, 
     STATUS_LOADED = 2, 
     LOG_LIMIT = 200; 

interface Props { 
    logEntries: Immutable.List<Immutable.Map<string, any>>; 
} 

interface State { 
    logEntries?: Immutable.List<Immutable.Map<string, any>>; 
    count?: number; 
    loadedRowsMap?: any; 
} 

class LogViewer extends React.Component<Props, State> { 
    constructor(props: Props) { 
     super(props); 

     this.state = { 
      logEntries: props.logEntries, 
      count: 0, 
      loadedRowsMap: {} 
     }; 
    } 

    render() { 
     return {this.renderLoader()}; 
    } 

    private renderLoader() { 
     const {logEntries, count} = this.state; 
     return (
      <InfiniteLoader isRowLoaded={this.isRowLoaded.bind(this)} 
          loadMoreRows={this.loadMoreRows.bind(this)} 
          minimumBatchSize={LOG_LIMIT} 
          rowCount={logEntries.size} > 
       { 
        ({onRowsRendered, registerChild}) => (
         <AutoSizer disableHeight> 
          { 
           ({width}) => (
            <Table headerHeight={20} 
              height={400} 
              onRowsRendered={onRowsRendered} 
              ref={registerChild} 
              rowCount={count} 
              className='log-entries' 
              gridClassName='grid' 
              headerStyle={{ fontSize: 15 }} 
              rowGetter={({index}) => logEntries.get(index)} 
              rowHeight={50} 
              width={width} > 
             <Column label='Name' 
               key='name' 
               dataKey='name' 
               width={200} /> 
            </Table> 
           ) 
          } 
         </AutoSizer> 
        ) 
       } 
      </InfiniteLoader> 
     ); 
    } 

    private isRowLoaded({index}) { 
     const {loadedRowsMap} = this.state; 
     return !!loadedRowsMap[index]; 
    } 

    private loadMoreRows({startIndex, stopIndex}) { 
     const {loadedRowsMap, level, logEntries} = this.state; 

     _.range(startIndex, stopIndex).forEach(i => { 
      loadedRowsMap[i] = STATUS_LOADING; 
     }); 
     this.setState({ loadedRowsMap }); 

     const offset = Math.floor((startIndex + 1)/LOG_LIMIT); 
     return Api.logs(LOG_LIMIT, offset) 
      .then(({body: [count, logs]}) => { 
       _.range(startIndex, stopIndex).forEach(i => { 
        loadedRowsMap[i] = STATUS_LOADED; 
       }); 
       const newLogs = logEntries.toJS().concat(logs); 
       this.setState({ 
        count, 
        logEntries: Immutable.fromJS(newLogs), 
        loadedRowsMap 
       }); 
      }); 
    } 
};

來源

2017-02-13 XeniaSis

的問題是，loadMoreRows不叫負載時或當部件被安裝。

Any time a range of rows loads，InfiniteLoadercalls isRowLoaded for each row確定是否需要加載。如果isRowLoaded返回false，則該行排隊並且loadMoreRows is called in chunks for each range of unloaded rows。

在上面你的情況，我相信什麼發生的事情是，你不能傳遞任何初始行至Table - 所以Grid最初沒有任何渲染（因爲它沒有行渲染）等的rows-我上面鏈接的加載的調用者沒有任何東西可以迭代，也沒有加載。這裏有幾個選項 - 要麼自己啓動第一次加載，要麼添加+1空行以提示InfiniteLoader，因爲它應該請求更多數據（like I do in this example）。

來源

2017-02-13 17:37:32 brianvaughn

我認爲問題在於我沒有設置爲加載最初日誌的狀態。謝謝，這部分工作現在！ – XeniaSis

loadMoreRows未加載調用

回答

相關問題