React中Intersection Observer动态分页后页面滚动复位问题求助

你遇到的问题是滚动加载新数据后页面自动回到顶部，核心原因主要有两个：一是状态更新时依赖旧值导致的渲染异常，二是列表项缺少唯一key导致React重新渲染整个列表，触发滚动位置重置。以下是具体修复方案：

修复步骤 #

• 使用函数式更新状态：避免直接依赖旧的listOfUnis值，确保数据追加逻辑准确，防止状态更新异常。
• 给列表项绑定唯一key：在UniversitiesList组件内部，为每个大学条目添加唯一标识（如ID）作为key，让React精准识别元素变化，避免全量重渲染。
• 优化Observer监听逻辑：确保Observer在合适时机重新绑定，避免无效监听。

修改后的完整代码 #

function AllUniversititesList() {
  const [loading, setLoading] = useState(false);
  const [listOfUnis, setListOfUnis] = useState([]);
  const [isSearched, setSearched] = useState(false);
  const lastElement = useRef();
  const observer = useRef();

  async function fetchAllUnis() {
    setLoading(true);
    const result = await SearchService.getAllUniversities();
    // 函数式更新，确保获取最新状态值
    setListOfUnis(prevList => [...prevList, ...result]);
    setLoading(false);
  }

  useEffect(() => {
    if (!listOfUnis.length) {
      fetchAllUnis();
    }
  }, []);

  useEffect(() => {
    if (loading) return;
    if (observer.current) observer.current.disconnect();
    
    const callback = (entries) => {
      if (entries[0].isIntersecting) {
        fetchAllUnis();
      }
    };
    
    observer.current = new IntersectionObserver(callback);
    if (lastElement.current) {
      observer.current.observe(lastElement.current);
    }
  }, [loading]);

  return (
    <section className='min-h-screen bg-slate-200 pt-[7%]'>
      {!loading && listOfUnis.length > 0 && (
        <UniversitiesList info={listOfUnis} />
      )}
      {loading && <div>加载中...</div>}
      <div className='w-full h-4' ref={lastElement}></div>
    </section>
  );
}

关键补充：UniversitiesList组件的key设置 #

必须在子组件中给每个列表项添加唯一key，否则仍可能出现滚动异常：

// UniversitiesList组件内部示例
function UniversitiesList({ info }) {
  return (
    <div>
      {info.map(university => (
        // 使用大学唯一ID作为key，避免用索引
        <div key={university.id} className="uni-item">
          {/* 渲染大学信息 */}
        </div>
      ))}
    </div>
  );
}

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