这段代码的作用是在滚动到底部时判断是否还有剩余的数据未加载,如果有,则继续发起请求获取数据。但是加上条件 if (current * size >= totals) 后,会导致首次调用接口时无法获取数据,因为 currenttotals 的初始值都为 0,相乘得到的结果也为 0,不满足条件,因此不会发起请求。

如果想要保留这个条件,需要在初始值时将 totals 设置为一个较大的值,例如 Number.MAX_SAFE_INTEGER

例如:

const [searchData, setSearchData] = useState({
  pagination: { current: 1, size: 20, totals: Number.MAX_SAFE_INTEGER },
  searchValue: '',
});

这样,首次调用接口时,current * size 始终小于 totals,满足条件,可以正常发起请求。

同时,需要在获取到实际数据后更新 totals 的值,例如:

const getDropdownPages = async () => {
  // 页码,及搜索值变化时,发请求
  if (current * size >= totals) {
    return;
  }
  const params = {
    current,
    size,
    keyword: searchValue,
    kanbanDropdownType: 'SPM_ROLE',
  };
  const { data } = await getDropdownPage(params);
  setProjectList((preOptions) => {
    return [...preOptions, ...data.records];
  });
  setSearchData({
    ...searchData,
    pagination: {
      current: data.current,
      totals: data.total, // 更新 totals 的值
      size: data.size,
    },
  });
};

这样就能解决首次加载时无法获取数据的问题,同时保证滚动加载逻辑的正确性。

Ant Design Pro Table 滚动加载数据优化 - 解决首次加载问题

原文地址: https://www.cveoy.top/t/topic/or1o 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录