反应虚拟化无限滚动无法正确呈现

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 函数并显示 "blinks"（滚动条从垂直方向快速移动）。

感谢您的帮助...

Answer 1

您需要设置

rowCount={dataTest.length}

在列表组件中。

反应虚拟化无限滚动无法正确呈现

React-virtualized infinite scroll not rendering correctly

reactjs

infinite-scroll

react-virtualized