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

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

@@ -22,32 +22,55 @@ const Index = () => {
const categoryId = Number(params.id); const categoryId = Number(params.id);
const reload = async () => { const reload = async () => {
console.log('初始化加载 - 分类ID:', categoryId);
// 重置状态
setPage(1);
setList([]);
setHasMore(true);
// 当前栏目信息 // 当前栏目信息
const navs = await getCmsNavigation(categoryId); const navs = await getCmsNavigation(categoryId);
// 当前栏目信息
if (navs) { if (navs) {
setNavigation(navs); setNavigation(navs);
} }
// 终极新闻列表
getList() // 加载第一页数据
getList(1);
} }
// 终极新闻列表 // 终极新闻列表
const getList = () => { const getList = (currentPage = page) => {
pageCmsArticle({categoryId, page}).then(res => { console.log('请求数据 - 页码:', currentPage, '分类ID:', categoryId);
pageCmsArticle({categoryId, page: currentPage}).then(res => {
console.log('获取到数据:', res);
if (res?.list && res?.list.length > 0) { if (res?.list && res?.list.length > 0) {
const newList = list?.concat(res.list) if (currentPage === 1) {
setList(newList); // 第一页,直接设置
setHasMore(true) setList(res.list);
} else {
// 后续页面,追加到现有列表
setList(prevList => {
const newList = [...prevList, ...res.list];
console.log('合并后的列表长度:', newList.length);
return newList;
});
}
setHasMore(true);
} else { } else {
setHasMore(false) console.log('没有更多数据了');
setHasMore(false);
} }
}).catch(error => {
console.error('获取数据失败:', error);
setHasMore(false);
}); });
} }
const reloadMore = async () => { const reloadMore = async () => {
setPage(page + 1) const nextPage = page + 1;
getList(); console.log('加载更多 - 下一页:', nextPage);
setPage(nextPage);
getList(nextPage);
} }
useEffect(() => { useEffect(() => {
@@ -80,7 +103,7 @@ const Index = () => {
list.map((item, index) => { list.map((item, index) => {
return ( return (
<div <div
key={index} key={item.articleId || `article-${index}`}
className={'flex items-center cursor-pointer'} className={'flex items-center cursor-pointer'}
style={{ style={{
border: '3px solid #F2FE03', border: '3px solid #F2FE03',

View File

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

View File

@@ -52,7 +52,7 @@ const Index = () => {
list.map((item, index) => { list.map((item, index) => {
return ( return (
<div <div
key={index} key={item.articleId || `article-${index}`}
className={'flex items-center cursor-pointer px-3'} className={'flex items-center cursor-pointer px-3'}
style={{ style={{
border: '3px solid #F2FE03', border: '3px solid #F2FE03',