vieo黑屏

src/pages/layout/pages/SongDetail/index.tsx

@@ -46,6 +46,9 @@ const SongDetail = () => {
   const [song, setSong] = useState<Song | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  
+  // 添加一个状态用于触发评论列表刷新
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
 
   useEffect(() => {
     const fetchSongDetail = async () => {
@@ -69,17 +72,18 @@ const SongDetail = () => {
     fetchSongDetail();
   }, [id]);
 
+  const handleCommentSubmit = () => {
+    setRefreshTrigger(prev => prev + 1);
+  };
 
   if (loading) {
     return <div className="loading">加载中...</div>;
   }
 
-
   if (error) {
     return <div className="error">错误: {error}</div>;
   }
 
-
   if (!song) {
     return <div className="no-song">歌曲不存在</div>;
   }
@@ -87,8 +91,16 @@ const SongDetail = () => {
   return (
     <div className='SongDetail'>
       <SongDetailPage song={song} />
-      <Rank_Recommend_body_list_Comment contentId={song.id} type={0} />
-      <Rank_Recommend_body_list_Comment_list contentId={song.id} type={0} />
+      <Rank_Recommend_body_list_Comment 
+        contentId={song.id} 
+        type={0} 
+        onCommentSubmit={handleCommentSubmit} // 传递回调函数
+      />
+      <Rank_Recommend_body_list_Comment_list 
+        key={`comment-list-${refreshTrigger}`} // 使用key强制重新渲染
+        contentId={song.id} 
+        type={0} 
+      />
     </div>
   )
 }

src/pages/layout/pages/Video/Video_player/index.tsx

@@ -19,7 +19,6 @@ const Video_Player = ({ mvId }: VideoPlayerProps) => {
   const location = useLocation();
   const params = useParams<{ id: string }>();
   const actualMvId = mvId || params.id;
-
   const dpContainer = useRef<HTMLDivElement>(null);
   const dp = useRef<DPlayer | null>(null);
   const [mvData, setMvData] = useState<any>(null);

src/pages/layout/pages/Video/index.tsx

@@ -3,15 +3,31 @@ import Rank_Recommend_body_list_Comment from '../find/rank/compomemts/Rank_Recom
 import Rank_Recommend_body_list_Comment_list from '../find/rank/compomemts/Rank_Recommend_body_list_Comment_list'
 import './index.css'
 import Video_Player from './Video_player'
+import { useState } from 'react';
+
 const Video = () => {
   const { id } = useParams<{ id: string }>();
   const numericId = id ? parseInt(id, 10) : 0;
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const handleCommentSubmit = () => {
+    setRefreshTrigger(prev => prev + 1);
+  };
+
   return (
     <div className="video">
       <Video_Player mvId={numericId}></Video_Player>
-      <Rank_Recommend_body_list_Comment contentId={numericId} type={1} />
-      <Rank_Recommend_body_list_Comment_list contentId={numericId} type={1} />
+      <Rank_Recommend_body_list_Comment 
+        contentId={numericId} 
+        type={1} 
+        onCommentSubmit={handleCommentSubmit}
+      />
+      <Rank_Recommend_body_list_Comment_list 
+        key={`comment-list-${refreshTrigger}`}
+        contentId={numericId} 
+        type={1} 
+      />
     </div>
   )
 }
+
 export default Video

src/pages/layout/pages/find/rank/compomemts/Rank_Recommend_body_list_Comment/index.tsx

@@ -4,13 +4,14 @@ import './index.css';
 interface CommentProps {
   contentId?: number;
   type: number;
+  onCommentSubmit?: () => void; // 添加回调函数属性
 }
 
-const Rank_Recommend_body_list_Comment = ({ contentId, type }: CommentProps) => {
-
-
+const Rank_Recommend_body_list_Comment = ({ contentId, type, onCommentSubmit }: CommentProps) => {
   const handleSubmitComment = () => {
-    window.location.reload();
+    if (onCommentSubmit) {
+      onCommentSubmit();
+    }
   }
 
   return (

src/pages/layout/pages/find/rank/compomemts/Rank_Recommend_body_list_Comment_list/index.tsx

@@ -36,16 +36,19 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
   const actualMvId = contentId;
   const [comments, setComments] = useState<ApiComment[]>([]);
   const [loading, setLoading] = useState(true);
-
+  const getCommentFun = async () => {
+    setLoading(true);
+    const res: ApiResponse = await getCommentListByIdType({
+      contentId: actualMvId,
+      type
+    });
+    setComments(res.data);
+  }
   useEffect(() => {
-    const fetchComments = async () => {
+    const fetchComments = () => {
       if (actualMvId) {
         try {
-          const res: ApiResponse = await getCommentListByIdType({
-            contentId: actualMvId,
-            type
-          });
-          setComments(res.data);
+          getCommentFun()
         } catch (error) {
           console.error('获取评论失败:', error);
         } finally {
@@ -73,15 +76,10 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
   const handleReplySubmit = () => {
     setActiveCommentBox(null);
     // 提交回复后重新获取评论列表
-    const fetchComments = async () => {
+    const fetchComments = () => {
       if (actualMvId) {
         try {
-          setLoading(true);
-          const res: ApiResponse = await getCommentListByIdType({
-            contentId: actualMvId,
-            type
-          });
-          setComments(res.data);
+          getCommentFun()
         } catch (error) {
           console.error('获取评论失败:', error);
         } finally {
@@ -98,12 +96,8 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
     const fetchComments = async () => {
       if (actualMvId) {
         try {
-          setLoading(true);
-          const res: ApiResponse = await getCommentListByIdType({
-            contentId: actualMvId,
-            type
-          });
-          setComments(res.data);
+          
+          getCommentFun()
         } catch (error) {
           console.error('获取评论失败:', error);
         } finally {
@@ -119,16 +113,16 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
     try {
       // 调用API进行点赞
       const res = await addLikeCount(commentId);
-      
+
       // 更新本地状态
-      setComments(prevComments => 
-        prevComments.map(comment => 
-          comment.id === commentId 
-            ? { ...comment, likeCount: comment.likeCount + 1 } 
+      setComments(prevComments =>
+        prevComments.map(comment =>
+          comment.id === commentId
+            ? { ...comment, likeCount: comment.likeCount + 1 }
             : comment
         )
       );
-      
+
       console.log('点赞成功:', res);
     } catch (error) {
       console.error('点赞失败:', error);
@@ -140,16 +134,16 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
     try {
       // 调用API取消点赞
       const res = await cancelLikeCount(commentId);
-      
+
       // 更新本地状态
-      setComments(prevComments => 
-        prevComments.map(comment => 
-          comment.id === commentId 
-            ? { ...comment, likeCount: Math.max(0, comment.likeCount - 1) } 
+      setComments(prevComments =>
+        prevComments.map(comment =>
+          comment.id === commentId
+            ? { ...comment, likeCount: Math.max(0, comment.likeCount - 1) }
             : comment
         )
       );
-      
+
       console.log('取消点赞成功:', res);
     } catch (error) {
       console.error('取消点赞失败:', error);
@@ -180,7 +174,7 @@ const Rank_Recommend_body_list_Comment_list = ({ contentId, type }: CommentListP
       <div className="Rank_Recommend_body_list_Comment_list_ttitle">
         精彩评论 ({comments.length})
       </div>
-      
+
       {comments.length > 0 ? (
         comments.map((item, index) => (
           <div