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 - 显然不是。

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

创建组件
_loadMoreRows被召唤（第1次）
解决_loadMoreRows返回的承诺后，请使用_isRowLoaded检查每个已加载的行
渲染每一行

Answer 1

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

这是误解的关键。 InfiniteLoader需要知道是否有更多数据要潜在加载。这些文档有几个简单的方法可以使用InfiniteLoader：

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

使用react-virtualized InfiniteLoader

1 个答案: