React分页逻辑优化：如何避免加载空白页面？

你的问题出在判断逻辑上：当返回的数据刚好是50条时，原代码会认为还有下一页并触发加载，但实际下一页没有数据，就出现了空白页。要解决这个问题，核心是判断当前返回的数据量是否小于请求的count值，如果小于，就标记为没有更多数据，停止加载下一页。

修改步骤 #

• 增加状态标记是否还有更多数据，同时利用接口请求的加载状态避免重复请求
• 根据接口返回的数据长度更新「是否还有更多数据」的状态
• 调整滚动触发逻辑，只有满足「到底部、还有更多数据、未在加载」三个条件时，才加载下一页
• 搜索条件变化时，重置分页状态，保证新搜索从第一页开始

修改后的代码示例 #

const [pageNumber, setPageNumber] = useState(0);
const [hasMore, setHasMore] = useState(true);

const vendors = useGetVendorsQuery({
  isSameDayRelease: sameDaySearch,
  region: selectedTab,
  name: vendorNameSearch,
  address: locationSearch,
  page: pageNumber,
  count: 50
});

// 数据返回后更新是否还有更多数据的状态
useEffect(() => {
  if (vendors.data) {
    // 只有当前页数据量等于count时，才认为还有下一页
    setHasMore(vendors.data.length === 50);
  }
}, [vendors.data]);

// 搜索条件变化时重置分页
useEffect(() => {
  setPageNumber(0);
  setHasMore(true);
}, [sameDaySearch, selectedTab, vendorNameSearch, locationSearch]);

const handleScroll = (e) => {
  const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
  
  // 同时满足三个条件才加载下一页
  if (bottom && hasMore && !vendors.isLoading) {
    setPageNumber(prevPageNumber => prevPageNumber + 1);
  }
};

关键逻辑说明 #

• setHasMore(vendors.data.length === 50)：如果当前页返回满50条数据，说明可能还有下一页；如果小于50，直接标记为没有更多数据，停止后续加载。
• 滚动触发时增加!vendors.isLoading判断：避免接口请求过程中重复触发分页，防止多次请求同一页数据。
• 搜索条件变化时重置分页状态：保证新的搜索结果从第一页开始加载，同时重新允许加载下一页。

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