使用反应虚拟化 InfiniteLoader

Question

react-virtualized 的InfiniteLoader 是否需要种子数据才能运行？以下是我的组件：

class Bookmarks extends PureComponent {
    constructor(props) {
        super(props);

        this.loaded = {
            cursor: null,
            data: []
        };

        this._isRowLoaded = this._isRowLoaded.bind(this);
        this._loadMoreRows = this._loadMoreRows.bind(this);
        this._rowRenderer = this._rowRenderer.bind(this);
    }

    render() {
        const size = this.loaded.data.length;

        return (
            <InfiniteLoader
                isRowLoaded={this._isRowLoaded}
                loadMoreRows={this._loadMoreRows}
                rowCount={size}>
                {({onRowsRendered, registerChild}) =>
                    <AutoSizer>
                        {({width, height}) =>
                            <List
                                ref={registerChild}
                                height={height}
                                onRowsRendered={onRowsRendered}
                                rowCount={size}
                                rowHeight={30}
                                rowRenderer={this._rowRenderer}
                                width={width}
                            />}
                    </AutoSizer>}
            </InfiniteLoader>
        );
    }

    _isRowLoaded({index}) {
        return !!this.loaded.data[index];
    }

    _loadMoreRows({startIndex, stopIndex}) {
        fetch('/api/bookmarks').then((response) => {
            return response.json();
        }).then((json) => {
            this.loaded = {
                cursor: json.cursor,
                data: this.loaded.data.push(...json.data),
            };
        });
    }

    _rowRenderer({index, key, style}) {
        return (
            <div key={key} style={style}>{this.loaded.data[index]}</div>
        );
    }
}

在render() 中，size 最初为零，因为还没有数据，我假设组件会调用_loadMoreRows——显然不是。

这就是我认为的逻辑流程（这是不正确的）：

1. 组件已创建
2. _loadMoreRows 被调用（第一次）
3. 当_loadMoreRows返回的promise被解析后，用_isRowLoaded检查每个加载的行
4. 渲染每一行

Answer 1

在render() 中，size 最初为零，因为还没有数据，我假设组件会调用_loadMoreRows

这是误解的关键。 InfiniteLoader 需要知道是否有更多数据可能加载。文档提供了一些使用 InfiniteLoader 的简单方法：

• 如果您知道远程记录的总数，请查看this example。
• 如果您只知道是否还有至少 1 条记录/页面要加载， 看看this example。