React与Supabase分页异常：第2页无数据显示

问题根源 #

你现在的代码存在核心逻辑错误：Supabase已经通过.range()完成了后端分页，返回的就是当前页的15条数据，但你额外在前端做了一次slice()截取，而且还引用了仅在useEffect异步函数内部有效的drawingsData变量，外部根本拿不到这个值。

切换到第2页时：

• Supabase返回的是第16-30条数据（共15条，数组索引0-14）
• 你用slice(15, 30)去截取这个只有15条的数组，自然得到空数组，导致页面无数据

修复步骤 #

1. 移除冗余的前端slice逻辑 #

修改分页方法，直接用状态project作为当前页数据，不需要再做slice处理：

const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(count / recordsPerPage); i++) {
  pageNumbers.push(i);
}

2. 修正JSX中的数据引用 #

把JSX里的currentRecords直接替换为状态project：

<div>
  {project?.map((drawing: any) => (
    // 你的JSX内容
  ))}

  <ul>
    <li className={`page-item previous ${currentPage === 1 ? "disabled" : "" }`}>
      <a href="#" onClick={() => paginate(currentPage - 1)}>
        <i></i>
      </a>
    </li>
    {[...Array(Math.ceil(count / recordsPerPage)).keys()].map((number) => (
      <li key={number + 1} className={`page-item ${currentPage === number + 1 ? "active" : ""}`}>
        <a href="#" className="page-link" onClick={() => paginate(number + 1)}>
          {number + 1}
        </a>
      </li>
    ))}
    <li className={`page-item next ${currentPage === Math.ceil(count / recordsPerPage) ? "disabled" : ""}`}>
      <a href="#" onClick={() => paginate(currentPage + 1)}>
        <i></i>
      </a>
    </li>
  </ul>
</div>

3. 优化错误处理（可选） #

在useEffect里补充Supabase错误抛出，方便后续排查问题：

useEffect(() => {
  const fetchProject = async () => {
    try {
      const {
        data: drawingsData,
        error: drawingsError,
        count,
      } = await supabase
        .from("Drawings")
        .select("*", { count: "exact" })
        .eq("project_id", projectId)
        .range(
          (currentPage - 1) * recordsPerPage,
          (currentPage - 1) * recordsPerPage + recordsPerPage - 1
        );

      if (drawingsError) throw drawingsError;

      setCount(count!);
      setProject(drawingsData);
    } catch (error) {
      console.error("分页数据获取失败:", error);
    }
  };

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

说明 #

修改后，每切换一页Supabase会返回对应页的15条数据，直接渲染即可解决第二页无数据的问题。

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