Окно реакции и бесконечная прокрутка загрузчика

Question

Я дал произвольное число в 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>
            );
    }
}

Answer 1

Я нашел эту ссылку здесь Виртуализировать большие списки с помощью реагирующего окна

Это помогает, но не может объяснить многое из того, что происходит, может быть, вы можете сначала попробовать пересканировать. Опять же, документация о response-window-infinite-loader также неясна для большинства вещей. Я выполнил свое задание, извлекая данные из API App-Store, где мне приходится загружать еще 10 при прокрутке. Но теперь это супер отстает и супер глючит, я не уверен, что делать сейчас, ха-ха.

Answer 2

Вы сделали здесь пару ошибок, поэтому я не уверен, какая из них вызывает вашу проблему.
Во-первых, вам не нужно возвращать массив из функции Row, только один элемент:

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

И не забудьте передать этот стиль, иначе ничего не получится.

Также передайте функцию в itemCount, примерно так:

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

Не стесняйтесь обращаться к документации.