ReactJS分页异常：直接跳转高位页码无数据显示问题排查

问题根源 #

核心问题是分页数据错误累加导致切片范围不匹配：

• 跳转高位页码时，setProject会把之前页面的drawings数据和当前请求的新数据拼接在一起，导致project.drawings的内容并非当前页的独立数据。
• 而currentRecords是根据当前页码计算切片范围去project.drawings中截取，比如跳转到第3页时，切片范围是30-45，但此时project.drawings是第1页+第3页的数据（共30条），自然截取不到内容，导致无数据展示。

修复方案 #

1. 修正setProject的状态更新逻辑 #

每次请求分页数据时，直接替换drawings字段，而非累加——跳转页码是获取对应页的独立数据，不是加载更多内容：

useEffect(() => {
  const fetchProject = async () => {
    try {
      const { data: projectData, error: projectError } = await supabase
        .from("Projects")
        .select("*")
        .eq("id", projectId)
        .single();

      const {
        data: drawingsData,
        error: drawingsError,
        count,
      } = await supabase
        .from("Drawings")
        .select(`*`, { count: "exact" })
        .eq("project_id", projectId)
        .order("id", { ascending: true })
        .range(
          (currentPage - 1) * recordsPerPage,
          (currentPage - 1) * recordsPerPage + recordsPerPage - 1
        );
      setCount(count);

      // 关键修改：直接替换drawings，不再累加
      setProject((prevProject) => {
        if (!prevProject) {
          return { ...projectData, drawings: drawingsData };
        }
        return {
          ...prevProject,
          ...projectData, // 若projectData不会随页码变化，可省略此行
          drawings: drawingsData // 替换为当前页的完整数据
        };
      });
    } catch (error) {
      console.error("数据请求失败：", error); // 添加错误日志便于排查
    }
  };

  fetchProject();
}, [projectId, currentPage, recordsPerPage]);

2. 简化currentRecords计算（可选） #

既然project.drawings已经是当前页的完整数据，可直接使用，无需再做切片：

// 替换原有的currentRecords计算逻辑
const currentRecords = project?.drawings || [];

如果保留原切片逻辑也能正常工作，但直接使用更高效，避免不必要的数组操作。

额外优化建议 #

• 防抖处理：若用户快速点击页码，可能发起多个请求，最后完成的请求会覆盖之前的状态，可添加防抖函数限制请求频率。
• 加载状态：添加加载中提示，提升用户体验。

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