优化:文章列表支持分页加载
This commit is contained in:
@@ -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 {
|
} else {
|
||||||
setHasMore(false)
|
// 后续页面,追加到现有列表
|
||||||
|
setList(prevList => {
|
||||||
|
const newList = [...prevList, ...res.list];
|
||||||
|
console.log('合并后的列表长度:', newList.length);
|
||||||
|
return newList;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
setHasMore(true);
|
||||||
|
} else {
|
||||||
|
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',
|
||||||
|
|||||||
@@ -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 (currentPage === 1) {
|
||||||
|
const navs = await getCmsNavigation(categoryId);
|
||||||
if (navs) {
|
if (navs) {
|
||||||
setNavigation(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 {
|
} else {
|
||||||
setHasMore(false)
|
// 后续页面,追加到现有列表
|
||||||
|
setList(prevList => {
|
||||||
|
const newList = [...prevList, ...articles.list];
|
||||||
|
console.log('honor/list 合并后的列表长度:', newList.length);
|
||||||
|
return newList;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setHasMore(true);
|
||||||
|
} else {
|
||||||
|
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 (
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user