Ant Design Pro Table 滚动加载数据优化 - 解决首次加载问题
这段代码的作用是在滚动到底部时判断是否还有剩余的数据未加载,如果有,则继续发起请求获取数据。但是加上条件 if (current * size >= totals) 后,会导致首次调用接口时无法获取数据,因为 current 和 totals 的初始值都为 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,
},
});
};
这样就能解决首次加载时无法获取数据的问题,同时保证滚动加载逻辑的正确性。
原文地址: https://www.cveoy.top/t/topic/or1o 著作权归作者所有。请勿转载和采集!