react-window-infinite-loader结合List组件滚动到顶部报签名错误的解决咨询

错误原因 #

触发Invalid onItemsRendered signature; please refer to InfiniteLoader documentation.错误，是因为你自定义或错误传递了onItemsRendered回调——InfiniteLoader要求这个回调必须接收({ visibleStartIndex, visibleStopIndex })格式的参数，若你修改了回调签名、未正确传递InfiniteLoader提供的回调，就会触发该报错。

正确实现步骤 #

1. 给List组件创建独立ref，用于调用滚动方法
2. 直接传递InfiniteLoader提供的onItemsRendered回调给List，不要修改其签名
3. 同时将List实例绑定到InfiniteLoader的ref和自定义ref上，保证两者功能正常

完整代码示例 #

import { useRef } from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import AutoSizer from 'react-virtualized-auto-sizer';

const ScrollToTopList = () => {
  const listRef = useRef(null);
  // 模拟已加载判断逻辑
  const isItemLoaded = (index) => index < 20;
  // 模拟加载更多逻辑
  const loadMoreItems = () => console.log('加载更多');
  // 模拟总条目数
  const itemCount = 100;

  const scrollToTop = () => {
    // 调用List的scrollToTop方法，先判断实例是否存在
    listRef.current?.scrollToTop();
  };

  return (
    <div style={{ height: '400px' }}>
      <button onClick={scrollToTop} style={{ marginBottom: '10px' }}>回到顶部</button>
      <AutoSizer>
        {({ height, width }) => (
          <InfiniteLoader
            isItemLoaded={isItemLoaded}
            loadMoreItems={loadMoreItems}
            itemCount={itemCount}
          >
            {({ onItemsRendered, ref }) => (
              <List
                ref={(node) => {
                  // 同时绑定InfiniteLoader的ref和自定义ref
                  ref(node);
                  listRef.current = node;
                }}
                // 直接传递InfiniteLoader提供的onItemsRendered，不要修改
                onItemsRendered={onItemsRendered}
                width={width}
                height={height}
                itemSize={50}
                itemCount={itemCount}
              >
                {({ index, style }) => (
                  <div style={style} className="list-item">
                    列表条目 {index + 1}
                  </div>
                )}
              </List>
            )}
          </InfiniteLoader>
        )}
      </AutoSizer>
    </div>
  );
};

export default ScrollToTopList;

关键注意点 #

• 绝对不要自行包裹onItemsRendered回调，必须直接使用InfiniteLoader传入的那个，它已经符合要求的参数格式
• 绑定ref时要同时兼顾InfiniteLoader的ref和自定义ref，否则InfiniteLoader无法跟踪列表渲染状态
• 调用scrollToTop前要判断listRef.current是否存在，避免组件未挂载时触发空指针错误

内容的提问来源于stack exchange，提问作者killjoy