使用react-infinite-scroll-component与Mantine Select组件时滚动位置重置问题排查

我之前也踩过类似的坑，结合你提到的「无限滚动组件完全重新渲染」这个现象，大概率是下面几个原因导致的，给你整理了对应的解决思路：

可能的成因 #

• 组件Key不稳定：如果react-infinite-scroll-component或者它所在的Mantine Select下拉容器的key属性在加载数据时发生了变化，React会直接销毁旧组件、创建新组件，自然会导致滚动条回到顶部。
• 不必要的全局重渲染：加载新数据时，更新的状态触发了整个无限滚动组件（甚至它的父组件）的完全重渲染，而不是局部更新列表项。比如直接替换整个数据数组，或者加载回调函数每次渲染都重新创建，导致组件props变化触发重渲染。
• Mantine Select下拉面板的重挂载：Mantine的Select组件默认的下拉面板可能在数据更新时重新挂载，连带里面的无限滚动组件一起被重新创建，滚动状态自然丢失。

具体解决办法 #

1. 稳定组件的Key值 #

检查react-infinite-scroll-component以及它所在的下拉容器的key设置，确保这个key是固定不变的，不要用动态生成的值（比如数据长度、时间戳）。比如：

<Select
  // 其他配置
>
  <InfiniteScroll
    key="select-infinite-scroll" // 固定key，不要动态变化
    dataLength={items.length}
    next={loadMore}
    hasMore={hasMore}
    loader={<div>加载中...</div>}
  >
    {items.map(item => <Option key={item.id} value={item.id}>{item.label}</Option>)}
  </InfiniteScroll>
</Select>

2. 优化状态更新与组件重渲染 #

• 增量更新数据：加载新数据时，不要直接替换整个数组，而是基于旧数组追加新数据，保持状态更新的连续性：

  // 正确的写法：基于prevState追加
  setItems(prevItems => [...prevItems, ...newFetchedItems]);
  
  // 错误的写法：直接替换整个数组，容易触发不必要的重渲染
  // setItems(newFetchedItems);
  

• 用useCallback包裹加载回调：避免每次渲染都创建新的loadMore函数，导致InfiniteScroll的next props变化触发重渲染：

  const loadMore = useCallback(async () => {
    if (isLoading) return;
    setIsLoading(true);
    const newItems = await fetchYourData();
    setItems(prev => [...prev, ...newItems]);
    setHasMore(newItems.length > 0);
    setIsLoading(false);
  }, [isLoading]);
  

• 用React.memo包裹列表项或无限滚动组件：减少不必要的子组件重渲染：

  const MemoizedOption = React.memo(({ value, label }) => (
    <Option value={value}>{label}</Option>
  ));
  

3. 自定义Mantine Select的下拉容器 #

如果是Select的下拉面板重挂载导致的问题，可以用dropdownComponent属性自定义下拉容器，确保容器不会轻易被重新创建：

import { Dropdown } from '@mantine/core';

<Select
  dropdownComponent={Dropdown}
  // 其他配置
>
  {/* 无限滚动组件 */}
</Select>

4. 手动保存和恢复滚动位置 #

如果上面的方法都没解决，可以手动干预滚动位置，在加载数据前保存，加载完成后恢复：

const scrollContainerRef = useRef(null);

const loadMore = async () => {
  // 保存当前滚动位置
  const scrollTop = scrollContainerRef.current?.scrollTop;
  
  // 加载数据逻辑
  setIsLoading(true);
  const newItems = await fetchYourData();
  
  // 更新数据后恢复滚动位置
  setItems(prev => [...prev, ...newItems]);
  setIsLoading(false);
  
  // 用setTimeout确保DOM更新完成后再恢复
  setTimeout(() => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop = scrollTop;
    }
  }, 0);
};

// 给InfiniteScroll设置ref
<InfiniteScroll
  ref={scrollContainerRef}
  // 其他props
>
  {/* 列表项 */}
</InfiniteScroll>

你可以先从检查组件Key和优化状态更新这两点入手，这是最常见的触发原因，应该能解决大部分情况。

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