IntersectionObserver回调状态管理异常：无限滚动pageIndex更新问题

问题根源 #

你的代码出现useEffect执行次数递增、状态更新异常的核心原因有两个：

1. 依赖链导致重复创建Observer：getList依赖pageIndex，每次页码更新都会重建getList；handleObserver依赖getList，进而每次都会重建；最终useEffect依赖handleObserver，导致每次页码更新都会新建一个IntersectionObserver并监听目标元素，多个Observer同时存在就会触发次数递增。
2. 闭包导致状态值陈旧：getList中直接引用pageIndex，由于React闭包特性，回调会捕获创建时的状态值，可能导致请求使用的页码不是最新的，出现状态更新异常。

修复代码 #

import { useState, useCallback, useEffect, useRef } from 'react';

// 假设你的api请求函数已定义
const api = async (page: number) => {
  // 模拟接口请求逻辑
  return { data: [] };
};

const InfiniteScroll = () => {
  const [pageIndex, setPageIndex] = useState<number>(2);
  // 用Ref同步保存最新页码，规避闭包问题
  const pageIndexRef = useRef<number>(pageIndex);
  
  // 实时同步状态到Ref
  useEffect(() => {
    pageIndexRef.current = pageIndex;
  }, [pageIndex]);

  const getList = useCallback(async () => {
    try {
      // 从Ref获取最新页码
      const currentPage = pageIndexRef.current;
      const { data } = await api(currentPage);
      // 函数式更新状态，确保基于最新值修改
      setPageIndex(prev => prev + 1);
      // 这里可添加列表数据合并逻辑，比如：
      // setList(prevList => [...prevList, ...data]);
    } catch (error) {
      // 自定义错误处理逻辑
      console.error('加载列表失败:', error);
    }
  }, [api]); // 仅依赖稳定的api函数，避免不必要的回调重建

  const handleObserver = useCallback(
    async ([entry]: IntersectionObserverEntry[], observer: IntersectionObserver) => {
      if (entry.isIntersecting) {
        observer.unobserve(entry.target);
        await getList();
        observer.observe(entry.target);
      }
    },
    [getList],
  );

  const loadMoreRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!loadMoreRef.current) return;

    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0,
    };

    const observer = new IntersectionObserver(handleObserver, observerOptions);
    observer.observe(loadMoreRef.current);

    return () => observer.disconnect();
  }, [handleObserver]);

  return (
    <div>
      {/* 渲染列表内容 */}
      <div ref={loadMoreRef}>加载更多</div>
    </div>
  );
};

export default InfiniteScroll;

关键优化点 #

• 使用Ref同步最新状态：pageIndexRef实时同步pageIndex的最新值，确保getList中始终能获取到当前最新的页码，解决闭包导致的陈旧值问题。
• 精简回调依赖项：getList不再依赖pageIndex，仅依赖稳定的api函数，大幅减少getList和handleObserver的重建次数，进而避免重复创建Observer。
• 函数式更新状态：setPageIndex(prev => prev + 1)确保基于最新的状态值更新页码，避免异步更新导致的状态偏差。

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