Reactjs 反应窗口和无限加载程序滚动问题

我在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>
            );
    }
}

我在这里找到了这个链接

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

我在这里找到了这个链接

它确实有帮助，但它不能解释发生了什么，也许你可以先试试overscan。 同样，react window infinite loader的文档在大多数方面也不清楚。

---

我通过从应用商店api获取数据来完成我的任务，在这里，每当我滚动时，我必须再加载10个。但现在是超级滞后，超级马车，我不知道现在该怎么办，哈哈

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

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

---

请毫不犹豫地参考。

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

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

---

请毫不犹豫地参考。

您对款式的建议确实挽救了我的脖子：D您对款式的建议确实挽救了我的脖子：D