実際に仮想化された無限のスクロールが正しくレンダリングされない

Question

配列から数値をリストするコンポーネントがあります。 は、私は、この例のように仮想化無限スクロールを反応させる実装しようとした： https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#user-content-infiniteloader-and-list

私は近い溶液からだが、コードが動作していない理由を把握することはできませんと思います。手伝って頂けますか ？ここに私の実際のコンポーネントであるスクロールバーがで高速に移動（私はスクロールすると

import * as React from 'react'; 
 

 
const dataTest = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]; 
 

 
export class EventsViewController extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     
 
     this.state = { 
 
      threshold: 10, 
 
      actualData: [] 
 
     }; 
 

 
     this.rowRenderer = this.rowRenderer.bind(this); 
 
     this.isRowLoaded = this.isRowLoaded.bind(this); 
 
     this.loadMoreRows = this.loadMoreRows.bind(this); 
 
    } 
 

 
    public isRowLoaded(param: any) { 
 
     return !!this.state.actualData[param.index]; 
 
    } 
 

 
    public loadMoreRows(param: any) { 
 
     const startIndex = param.startIndex; 
 
     const stopIndex = param.stopIndex; 
 
     
 
     const dataLoaded = [];  
 
     for (let i = startIndex; i < stopIndex; i++) { 
 
      dataLoaded[i] = dataTest[i]; 
 
     } 
 

 
     this.setState({ 
 
      actualData: dataLoaded 
 
     }); 
 
    } 
 

 
    public componentWillMount() { 
 
     const dataLoaded] = []; 
 
     for (let i = 0; i < this.state.threshold; i++) { 
 
      dataLoaded[i] = dataTest[i]; 
 
     } 
 
     this.setState({ 
 
      actualData: dataLoaded 
 
     }); 
 
    } 
 

 
    public rowRenderer(param: any) { 
 
     const list = this.state.actualData; 
 
     const index = param.index; 
 

 
     return (
 
      <div 
 
       key={param.key} 
 
       > 
 
       {list[index]} 
 
      </div> 
 
     ); 
 
    } 
 

 
    public render() {  
 
     return (
 
      <InfiniteLoader 
 
       isRowLoaded={this.isRowLoaded} 
 
       loadMoreRows={this.loadMoreRows} 
 
       rowCount={this.state.actualData.length} 
 
       > 
 
      {({ onRowsRendered, registerChild }) => (
 
       <List 
 
        height={250} 
 
        onRowsRendered={onRowsRendered} 
 
        ref={registerChild} 
 
        rowCount={this.state.actualData.length} 
 
        rowHeight={50} 
 
        rowRenderer={this.rowRenderer} 
 
        width={300} 
 
       /> 
 
      )} 
 
      </InfiniteLoader> 
 
     ); 
 
    } 
 
}

は、loadMoreRows関数が無限に呼び出され、表示「点滅」（私はできるだけそれをきれいにしようとしました）それ自体が垂直から）。あなたの助けのための

おかげで...

Answer 1

あなたはListコンポーネントに

rowCount={dataTest.length} 

を設定する必要があります。