diff --git a/.next b/.next new file mode 120000 index 0000000..27e4e2f --- /dev/null +++ b/.next @@ -0,0 +1 @@ +/.next \ No newline at end of file diff --git a/src/components/DoubanComments.tsx b/src/components/DoubanComments.tsx index 6ea8a70..bb43fdf 100644 --- a/src/components/DoubanComments.tsx +++ b/src/components/DoubanComments.tsx @@ -19,10 +19,11 @@ interface DoubanCommentsProps { export default function DoubanComments({ doubanId }: DoubanCommentsProps) { const [comments, setComments] = useState([]); - const [loading, setLoading] = useState(true); + const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [total, setTotal] = useState(0); const [hasMore, setHasMore] = useState(false); + const [hasStartedLoading, setHasStartedLoading] = useState(false); const limit = 20; const fetchComments = useCallback(async (startIndex: number) => { @@ -68,9 +69,21 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) { }, [doubanId]); useEffect(() => { - fetchComments(0); + // 重置状态当 doubanId 变化时 + setHasStartedLoading(false); + setComments([]); + setLoading(false); + setError(null); + setTotal(0); + setHasMore(false); }, [doubanId]); // 只在 doubanId 变化时重新获取 + const startLoading = () => { + console.log('开始加载评论'); + setHasStartedLoading(true); + fetchComments(0); + }; + const loadMore = () => { console.log('点击加载更多,当前状态:', { loading, @@ -103,6 +116,30 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) { ); }; + // 初始状态:显示查看评论按钮 + if (!hasStartedLoading) { + return ( +
+
+ + + +

点击查看豆瓣评论

+
+ +
+ ); + } + if (loading && comments.length === 0) { return (
@@ -119,6 +156,12 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) {

{error}

+
); }