反应虚拟化无限滚动无法正确渲染答案

【问题标题】：React-virtualized infinite scroll not rendering correctly反应虚拟化无限滚动无法正确渲染
【发布时间】：2018-04-28 11:10:59
【问题描述】：

我有一个组件，我想在其中列出数组中的数字。我试图像在这个例子中那样实现反应虚拟化无限滚动： 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 函数被无限期调用并且显示“闪烁”（滚动条从垂直方向自行快速移动）。

感谢您的帮助...

【问题讨论】：

标签： reactjs infinite-scroll react-virtualized

【解决方案1】：

你需要设置

rowCount={dataTest.length}

在 List 组件中。

【讨论】：