反应窗口和无限加载器滚动问题答案

【问题标题】：react-window and infinite loader scrolling issue反应窗口和无限加载器滚动问题
【发布时间】：2019-11-06 07:39:39
【问题描述】：

我在 itemCount 中给出了一个任意数字，因为我的列表长度未知。当我向下滚动时，infiniteloader 仅第一次正常加载数据。但是在我的窗口视图完全空白后它会加载。

假设我的数组列表在每次提取时包含 10 个项目。如何在向下滚动并及时显示内容时立即加载数据？

const CARD_SIZE = 265;

class CardList extends PureComponent {

    getItemData = memoize((itemsPerRow, newItems) => ({
        itemsPerRow,
        newItems
    }))


        Row = ({data, index, style }) => {
        const { itemsPerRow, newItems } = data;

        const items = [];
        const fromIndex = index * itemsPerRow;
        const toIndex = Math.min(fromIndex + itemsPerRow, newItems.length);

        for (let i = fromIndex; i < toIndex; i++) {
            items.push(
                <Card 
                key={newItems[i]}
                style={style}
                token={this.props.token}
                disableButton={this.props.disableButton} 
                image={newItems[i]} />
                );
        }
            return (
                <div style={style}>
                {items}
                </div>
            );
        }

    render() {

        const { newItems, loadMore } = this.props;

        return (
            <div style={{marginTop: "10px", height: "100vh" }}>

            <AutoSizer>
            {
                ({ height, width }) => {
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    // const rowCount = Math.ceil(newItems.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, newItems);

                    return (
              <InfiniteLoader
              isItemLoaded={index => index < newItems.length - 1}
              itemCount={5000}
              loadMoreItems={loadMore}
               >
              {({ onItemsRendered, ref }) => (

                        <List
                        height={height}
                        itemCount={5000}
                        itemData={itemData}
                        itemSize={CARD_SIZE}
                        width={width}
                        overscanCount={1}
                        onItemsRendered={onItemsRendered}
                        ref={ref}
                        >
                        { this.Row }
                        </List>

                        )}
            </InfiniteLoader>

                        )
                }
            }
            </AutoSizer> 
            </div>
            );
    }
}

【问题讨论】：

标签： reactjs infinite-scroll react-virtualized react-window

【解决方案1】：

您在这里犯了几个错误，所以我不确定是哪一个导致了您的问题。
首先，您不需要从 Row 函数返回一个数组，只需一个项目：

Row = ({index, style}) => <div style={style}>{items[index]}</div>

并且不要忘记传递该样式属性，否则它将无法正常工作。

另外，将函数传递给 itemCount，类似这样的：

const itemCount = hasNextPage ? items.length + 1 : items.length;

不要犹豫，参考documentation。

【讨论】：

你对风格的建议真的救了我的命：D

【解决方案2】：

我在这里找到了这个链接Virtualize large lists with react-window

它确实有帮助，但它不能解释发生了什么，也许你可以先尝试过扫描。同样，react-window-infinite-loader 的文档在大多数情况下也不清楚。我通过从应用商店 api 获取数据来完成我的任务，每当我滚动时，我都必须在其中加载 10 个。但是现在超级滞后，超级越野车，我不知道现在该怎么办，哈哈。

【讨论】：