React中如何从Context正确获取分页的用户帖子数据

问题根因 #

你遇到的问题核心是没有将分页参数和当前加载状态关联，若写死每次仅取前10条数据，自然无法拿到后续分页的内容。根据你使用的无限加载/前端分页两种常见场景，可以参考以下方案实现：

方案1：无限加载场景（滚动加载更多，所有已加载内容全部展示） #

这种场景下不需要调用getUserPosts时做截断，你每次拉取新页的10条数据都会追加到Context的缓存中，直接取对应用户的全量缓存数据即可，拉取新数据后列表会自动更新：

// 直接取该用户所有已缓存的帖子，新增数据追加后会自动更新
const posts = userPosts.getUserPosts(userData.id);

注意确保你的userPostsReducer中新增帖子的逻辑是追加到数组末尾而非覆盖，参考示例：

function userPostsReducer(state, action) {
  switch (action.type) {
    case 'ADD_USER_POSTS':
      const { userId, posts, unshift } = action.payload;
      const existingPosts = state[userId] ?? [];
      return {
        ...state,
        [userId]: unshift ? [...posts, ...existingPosts] : [...existingPosts, ...posts]
      }
    // 其余逻辑省略
  }
}

方案2：前端分页场景（点击页码切换，每次仅展示当前页的10条） #

如果需要按页码切换、每次仅展示单页内容，你需要在自定义Hook中维护当前页码的状态，根据页码计算偏移量后传入getUserPosts：

const PAGE_SIZE = 10;
// 维护当前页码，默认第1页
const [currentPage, setCurrentPage] = useState(1);
// 计算当前页的偏移量
const offset = (currentPage - 1) * PAGE_SIZE;
// 取对应分页区间的帖子
const posts = userPosts.getUserPosts(userData.id, offset, PAGE_SIZE);

// 下一页切换逻辑
const handleNextPage = async () => {
  const totalCached = userPosts.getUserPosts(userData.id).length;
  // 已缓存的内容足够展示下一页，直接切换页码
  if (offset + PAGE_SIZE < totalCached) {
    setCurrentPage(prev => prev + 1);
    return;
  }
  // 无缓存则先拉取新页数据，拉取成功后再切换页码
  await getMorePosts(PAGE_SIZE);
  setCurrentPage(prev => prev + 1);
}

额外注意点 #

你提供的代码片段中缺少isFetching、hasMoreToLoad两个ref的定义，记得补充避免报错：

const isFetching = useRef(false);
const hasMoreToLoad = useRef(true);

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