From 0636552867e5532e3ab038b524ce2f1813c15bbe Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Thu, 11 Apr 2024 16:54:46 +0800
Subject: [PATCH] fix(comment): Fix switch commentType have no request.

---
 src/components/Comment/Comment.tsx       | 25 ++++++++++++------------
 src/components/Comment/CommentHeader.tsx |  8 ++++----
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 161aed3..7bd905d 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -28,6 +28,8 @@ export default function Comment({ journalId, className, totalCommentReply, total
   const handleChangeType = async (type: 'hot' | 'new') => {
     setCommentType(type);
     setPage(1);
+    setCommentList([]);
+    handleLoadMore(); // 添加这一行
   };
 
   // 发表评论
@@ -38,25 +40,24 @@ export default function Comment({ journalId, className, totalCommentReply, total
 
   // 加载评论
   const handleLoadMore = useCallback(async () => {
-    if (commentList.length >= totalCommentReplyInt) return;
-    if (loading) return;
+    console.log('handleLoadMore');
+    if (loading || commentList.length >= totalCommentReplyInt) return;
+
     setLoading(true);
     const res = await apiGetComment({ type: commentType, journalId, page, size: pageSize });
     // 请求失败
-    if (res.code !== 200) {
-      setLoading(false);
-      return;
-    }
-    // 请求第一页时，先清空列表
-    if (page === 1) setCommentList([]);
+    if (res.code !== 200) return setLoading(false);
+
     // 请求到完整一页后翻页
     if (res.data.rows.length === 5) setPage((prePage) => prePage + 1);
-    // 最后一页完整？
+
+    // 最后一页完整
     const lastPageLength = commentList.length % pageSize;
     if (lastPageLength) setCommentList([...commentList, ...res.data.rows.slice(lastPageLength)]);
+
     setCommentList([...commentList, ...res.data.rows]);
     setLoading(false);
-  }, [commentList, page]);
+  }, [commentList, page, commentType]);
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {
@@ -81,11 +82,11 @@ export default function Comment({ journalId, className, totalCommentReply, total
           <CommentHeader
             type={commentType}
             count={totalCommentReply}
-            onChange={(type: 'hot' | 'new') => handleChangeType(type)}
+            onChangeType={(type) => handleChangeType(type)}
             clssName="mt-[25px]"
           />
           <CommentList commentList={commentList} />
-          <div ref={loaderRef} className="h-[200px">
+          <div ref={loaderRef} className="h-[200px]">
             {loading && 'loading...'}
           </div>
         </>
diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx
index 739996b..cb57c07 100644
--- a/src/components/Comment/CommentHeader.tsx
+++ b/src/components/Comment/CommentHeader.tsx
@@ -2,12 +2,12 @@ export default function CommentHeader({
   type,
   count,
   clssName,
-  onChange,
+  onChangeType,
 }: {
   type: 'hot' | 'new';
   count: string;
   clssName: string;
-  onChange: (value: 'hot' | 'new') => void;
+  onChangeType: (value: 'hot' | 'new') => void;
 }) {
   return (
     <div className={`flex flex-row items-center justify-between mb-[10px] ${clssName}`}>
@@ -19,14 +19,14 @@ export default function CommentHeader({
       <div className="flex flex-row items-center text-[14px] leading-[19.6px] gap-[12px]">
         <div
           className={`${type === 'hot' ? 'text-base' : 'text-[rgba(0,0,0,0.4)] hover:text-brand cursor-pointer'}`}
-          onClick={() => onChange('hot')}
+          onClick={() => onChangeType('hot')}
         >
           热门
         </div>
         <div className="text-[rgba(0,0,0,0.4)] cursor-pointer hover:text-brand">|</div>
         <div
           className={`${type === 'new' ? 'text-base' : 'text-[rgba(0,0,0,0.4)] hover:text-brand cursor-pointer'}`}
-          onClick={() => onChange('new')}
+          onClick={() => onChangeType('new')}
         >
           最新
         </div>