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

src/expert/index.tsx

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

src/honor/list.tsx

@@ -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 (

src/zzjy/index.tsx

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