Question

通过使用DetailsList并尝试制作一个像here这样的无限滚动列表，我遇到了一个问题。我使用与链接相同的方法：每次搜索都会在数组末尾添加一个空行。如果我完成了数组（处于我的状态），则删除最后一个空行，完成数组，并在完成的数组的末尾添加一个新的空行。然后，由于状态的更新，我的DetailsList也被更新。

虽然我期望每次我来到数组的底部时都会触发onRenderMissingItem方法，但是我注意到它总是被触发，直到我的数组结尾不包含任何 null 行（即使我位于DetailsList的顶部）。

我只是在onrender函数中调用我的DetailsList

<DetailsList
            className="ms-DetailsList-limitHeight"
            items = { arrayProjects }
            onRenderItemColumn = {this._onRenderItemColumn}
            onRenderMissingItem = {this._onDelayedLoadNextPage}
            layoutMode = {DetailsListLayoutMode.fixedColumns}   
            selectionMode = {SelectionMode.none}        
            columns = {columns}

        />

我的onDelayedLoadNextPage：

public _onDelayedLoadNextPage = (index:number) : null => {
    let isLoading = this.state.isLoading;
    if ( !isLoading ) {
        this.setState({ isLoading: true });
        // Getting all datas and set isLoading to false
        this.getItems();
        return null;
    }

};

我的函数getItems搜索下一个数据，如果没有更多要加载的内容，则添加 null 行。研究完成后，isLoading参数也设置为false。

onRenderMissingItem运作良好，但我认为通常是onRenderCell，它必须等待，直到到达数组底部为止。

有人有想法吗？如果我在窗口中看不到行或列表中没有滚动，为什么会触发onRenderCell？

无需滚动即可触发onRenderMissingItem DetailsList

0 个答案: