React Hook状态未保留历史值：分页加载数据累加异常求助

我遇到了一个React状态更新的问题：父组件调用API获取数据并存入state，传给子组件。当子组件触发滚动到底部的事件时，父组件会再次调用API拿新数据，想把新数据和旧数据合并更新state，但状态总是没法保留全部历史值。

举个例子：

• 第一次调用API拿到10条数据，userData是10个对象的数组，传给子组件
• 触发子组件事件后，第二次调用API拿到10条新数据，合并后总数20，这时候是对的
• 第三次调用API时，旧数组居然只有10条，合并后还是20，而我预期应该是20+10=30

父组件代码： #

const onBottomEventSeeAlluser = async () => {
  Pagination.offset = Pagination.offset + 1;
  await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
    userData=> {
      console.log(userData.data, loading);
      setUserData(userPData=>[...userPData, ...userData.data]);
    }
  );
};

render (
  <AllUser userDataNews={userData} onBottomEvent={onBottomEventSeeAllUser} ></AllUser>
)

子组件代码： #

function AllUser({ userDataNews, onBottomEvent }) {
  useEffect(() => {
    console.log(userDataNews);
    console.log(BottomScrollListener.defaultProps);
    window.addEventListener("scroll", onScrollCheck, true);
  }, []);
  const onScrollCheck = event => {
    event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight ? onBottomEvent() : "";
  };
}

问题根源 #

我一眼就发现问题出在两个关键地方：

1. 子组件useEffect依赖项缺失：你的子组件useEffect只在挂载时执行一次，绑定的onBottomEvent是组件刚挂载时的版本——它引用的userData还是初始的10条数据。当父组件更新state后，子组件的监听事件并没有更新，导致第三次触发时，调用的是旧的onBottomEventSeeAlluser函数，里面的状态更新逻辑拿到的userPData还是最早的10条，而非合并后的20条。
2. 未清理滚动监听：挂载时添加的scroll监听没有在组件卸载或依赖变化时移除，可能会产生多个监听实例，进一步干扰状态更新逻辑。

修复方案 #

第一步：修复子组件的监听逻辑

把onBottomEvent和userDataNews加入useEffect依赖数组，同时添加清理函数移除监听，避免内存泄漏和旧函数引用问题：

function AllUser({ userDataNews, onBottomEvent }) {
  useEffect(() => {
    console.log(userDataNews);
    // 把监听函数定义在useEffect内部，确保每次依赖变化都用最新的函数
    const onScrollCheck = event => {
      if (event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight) {
        onBottomEvent();
      }
    };
    window.addEventListener("scroll", onScrollCheck, true);
    
    // 组件卸载或依赖变化时移除监听
    return () => {
      window.removeEventListener("scroll", onScrollCheck, true);
    };
  }, [userDataNews, onBottomEvent]); // 添加正确的依赖项
}

第二步：修正父组件的拼写错误+优化API调用

注意到你父组件render里的函数名写错了：onBottomEvent={onBottomEventSeeAllUser}，但函数定义是onBottomEventSeeAlluser（大小写不一致），这会导致事件无法正确触发！另外优化API调用的错误处理，避免offset错误递增：

const onBottomEventSeeAlluser = async () => {
  const newOffset = Pagination.offset + 1;
  try {
    const userData = await HomeAPI.newsDetail(newOffset, Pagination.limit);
    console.log(userData.data);
    // 函数式更新确保拿到最新的状态
    setUserData(prev => [...prev, ...userData.data]);
    // 只有API调用成功才更新offset
    Pagination.offset = newOffset;
  } catch (err) {
    console.error('获取数据失败:', err);
    // 调用失败时回滚offset
    Pagination.offset = Pagination.offset;
  }
};

render (
  <AllUser userDataNews={userData} onBottomEvent={onBottomEventSeeAlluser} ></AllUser>
)

总结 #

核心问题就是子组件的滚动监听绑定了旧的事件处理函数，导致状态更新时拿不到最新的历史数据。通过给useEffect添加正确的依赖项、清理监听，再修正拼写错误，就能解决这个问题啦。

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