React项目中切换组件后修复无限滚动逻辑并保留加载状态的实现方案

要解决返回列表组件时重复请求数据、丢失滚动位置的问题，我们可以从状态持久化、滚动位置保存恢复、请求触发控制三个方面入手，以下是具体实现方案：

1. 确保状态在组件卸载后不丢失 #

首先检查你的mealSearchResultsContext和latestMealDocContext的作用域：如果它们是在当前列表组件内部提供的，组件卸载时状态会被清空。你需要将ContextProvider提升到更高层级（比如App.js或者路由的父组件），这样切换路由时状态会被保留。

2. 控制初始请求，避免重复加载 #

修改你的useEffect，添加判断条件，只有当没有已加载数据时才发起初始请求：

useEffect(() => {
  // 只有当搜索结果为空时，才加载初始数据
  if (mealSearchResults.length === 0) {
    getNextMeals();
  }
}, [mealSearchResults]);

3. 维护hasMore状态，阻止已加载完后的重复请求 #

添加一个hasMore状态到Context或者组件内部，标记是否还有更多数据可以加载：

// 可以把hasMore也放到Context里，或者组件内部
const [hasMore, setHasMore] = useContext(hasMoreContext); // 假设已在Context中定义

const getNextMeals = async () => {
  if (!hasMore) return; // 如果没有更多数据，直接返回
  
  const ref = db
    .collection("meals")
    .orderBy("timestamp")
    .limit(6)
    .startAfter(latestMealDoc || 0);
  const data = await ref.get();

  // 判断是否还有更多数据：如果返回的文档数量小于限制数，说明已经加载完
  setHasMore(data.docs.length === 6);

  data.docs.forEach((doc) => {
    const meal = doc.data();
    setMealSearchResults((prev) => [...prev, meal]);
  });
  setLatestMealDoc(data.docs[data.docs.length - 1]);
};

在react-infinite-scroll-component中使用这个状态：

<InfiniteScroll
  dataLength={mealSearchResults.length}
  next={getNextMeals}
  hasMore={hasMore}
  loader={<h4>Loading...</h4>}
  endMessage={<p>已加载全部内容</p>}
>
  {/* 你的食谱列表项 */}
</InfiniteScroll>

4. 保存与恢复滚动位置 #

使用useRef获取滚动容器的引用，结合sessionStorage保存滚动位置：

import { useLocation, useEffect, useRef } from 'react';

const MealList = () => {
  const location = useLocation();
  const scrollContainerRef = useRef(null);

  // 组件挂载时恢复滚动位置
  useEffect(() => {
    const savedScrollPos = sessionStorage.getItem('mealListScrollPos');
    if (savedScrollPos && scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop = parseInt(savedScrollPos, 10);
    }
  }, [location.pathname]); // 路由切换到当前页面时触发

  // 组件卸载前保存滚动位置
  useEffect(() => {
    const saveScrollPos = () => {
      if (scrollContainerRef.current) {
        sessionStorage.setItem('mealListScrollPos', scrollContainerRef.current.scrollTop.toString());
      }
    };
    // 离开当前页面时保存滚动位置
    return () => saveScrollPos();
  }, [location.pathname]);

  return (
    <div ref={scrollContainerRef} style={{ overflowY: 'auto', height: '100vh' }}>
      <InfiniteScroll
        // 你的无限滚动配置
      >
        {/* 列表内容 */}
      </InfiniteScroll>
    </div>
  );
};

额外优化：使用路由状态传递（可选） #

如果你不想用sessionStorage，也可以通过React Router的state传递滚动位置：

// 跳转到详情页时保存滚动位置
const handleMealClick = (meal) => {
  const scrollPos = scrollContainerRef.current.scrollTop;
  navigate(`/meal/${meal.id}`, { state: { scrollPos } });
};

// 列表组件挂载时恢复
useEffect(() => {
  if (location.state?.scrollPos && scrollContainerRef.current) {
    scrollContainerRef.current.scrollTop = location.state.scrollPos;
    // 清除状态，避免下次返回重复使用
    navigate(location.pathname, { replace: true, state: {} });
  }
}, [location]);

这样处理后，当你从详情页返回列表组件时，不仅会保留已加载的所有数据，还会自动恢复到之前的滚动位置，同时不会重复发起已完成的数据请求。

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