优化:文章列表支持分页加载
This commit is contained in:
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user