React-Window-Infinite-Loader预取额外数据

Question

我不确定为什么会发生这种情况，但是 infiniteloader 在我刚刚加载页面而不滚动时，呼叫两次（从0-8开始，然后从8-16起）全部。另外，即使我在加载16行后只滚动几行滚动，它也会触发另一个电话17-24。

这是我的容器组件

import React from 'react';
import PropTypes from 'prop-types';
import getPropType from '../../../common/js/proptypes';
import { connect } from 'react-redux';
import InfiniteList from 'src/common/components/InfiniteList';
import { fetchNextPage } from '../../state/reducers/training-slice';
import { bindActionCreators } from 'redux';

class Training extends React.Component {
  render() {
    const { hasNextPage, isNextPageLoading, trainings, fetchNextPage } = this.props;
    return (
      <>
        <InfiniteList
          hasNextPage={hasNextPage}
          isNextPageLoading={isNextPageLoading}
          items={trainings}
          loadNextPage={fetchNextPage}
        />
      </>
    );
  }
}

Training.propTypes = {
  trainings: PropTypes.arrayOf(getPropType('training'))
};

const mapState = (state) => {
  console.log(state.trainings);
  return {
    trainings: state.trainings.trainings,
    isNextPageLoading: state.trainings.isFetching,
    hasNextPage: state.trainings.trainings.length % state.trainings.limit === 0
  };
};

const mapDispatch = (dispatch) => bindActionCreators({ fetchNextPage }, dispatch);

export default connect(mapState, mapDispatch)(Training);

。代码>组件

import React from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

export default function InfiniteList({ hasNextPage, isNextPageLoading, items, loadNextPage }) {
  // If there are more items to be loaded then add an extra row to hold a loading indicator.
  const itemCount = hasNextPage ? items.length + 1 : items.length;

  const loadMoreItemsProxy = (start, end) => {
    console.log(start, end);
    loadNextPage();
  };
  // Only load 1 page of items at a time.
  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
  const loadMoreItems = isNextPageLoading ? () => {} : loadMoreItemsProxy;

  // Every row is loaded except for our loading indicator row.
  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  // Render an item or a loading indicator.
  const Item = ({ index, style }) => {
    let content;
    if (!isItemLoaded(index)) {
      content = 'Loading...';
    } else {
      content = items[index].courseFullName;
    }

    return <div style={style}>{content}</div>;
  };

  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={itemCount}
      loadMoreItems={loadMoreItemsProxy}
      minimumBatchSize={8}
      threshold={10}
    >
      {({ onItemsRendered, ref }) => (
        <List
          className="List"
          height={150}
          itemCount={itemCount}
          itemSize={30}
          onItemsRendered={onItemsRendered}
          ref={ref}
          width={300}
        >
          {Item}
        </List>
      )}
    </InfiniteLoader>
  );
}

和以下是控制台上状态更改的输出，该输出表明调用两次，以获取16个项目。这里出了什么问题？我尝试了不同的 minimumbatchSize 和阈值配置，但似乎不起作用。

Answer 1

较低的阈值值似乎阻止了预取。我终于了解了阈值的含义 - 只需将“从底部”添加到文档中的最后一句话。

这意味着，如果您最初加载10个条目，并且具有2个阈值，则LIB将在第8（10-2）条目进入列表的观看口（想想） InterSectionObserver api）