优化:文章列表支持分页加载

This commit is contained in:
2025-07-11 20:21:02 +08:00
parent 86edcf21b3
commit 8375c2d6e4
3 changed files with 74 additions and 28 deletions

View File

@@ -19,37 +19,60 @@ const List = () => {
const [hasMore, setHasMore] = useState(true)
const [list, setList] = useState<CmsArticle[]>([])
const reload = async () => {
const reload = async (currentPage = page) => {
// 获取栏目ID
const categoryId = Number(params.id);
// 当前栏目信息
const navs = await getCmsNavigation(categoryId);
// 终极新闻列表
const articles = await pageCmsArticle({categoryId, page});
console.log('honor/list 请求数据 - 页码:', currentPage, '分类ID:', categoryId);
// 当前栏目信息
if (navs) {
setNavigation(navs);
// 当前栏目信息(只在第一页时获取)
if (currentPage === 1) {
const navs = await getCmsNavigation(categoryId);
if (navs) {
setNavigation(navs);
}
}
// 终极新闻列表
const articles = await pageCmsArticle({categoryId, page: currentPage});
console.log('honor/list 获取到数据:', articles);
// 新闻列表
if (articles) {
if (articles?.list && articles?.list.length > 0) {
const newList = list?.concat(articles.list)
setList(newList);
setHasMore(true)
if (currentPage === 1) {
// 第一页,直接设置
setList(articles.list);
} else {
// 后续页面,追加到现有列表
setList(prevList => {
const newList = [...prevList, ...articles.list];
console.log('honor/list 合并后的列表长度:', newList.length);
return newList;
});
}
setHasMore(true);
} else {
setHasMore(false)
console.log('honor/list 没有更多数据了');
setHasMore(false);
}
}
}
const reloadMore = async () => {
setPage(page + 1)
reload().then();
const nextPage = page + 1;
console.log('honor/list 加载更多 - 下一页:', nextPage);
setPage(nextPage);
reload(nextPage);
}
useEffect(() => {
reload().then()
console.log('honor/list 初始化加载');
// 重置状态
setPage(1);
setList([]);
setHasMore(true);
// 加载第一页数据
reload(1);
}, [])
return (