circle_xcx/src/components/comment-list/index.tsx

import { Text, View } from "@tarojs/components";
import CommentListItem from "./item";
import { useEffect, useState } from "react";
import { getCommentListApi } from "../../api/comment";

const CommentList = ({ postId }) => {
  // const CommentList = ({ commentsData }) => {
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [commentsData, setCommentsData] = useState<any[]>([]);
  const [count, setCount] = useState(0);
  useEffect(() => {
    getCommentListApi({ post_id: postId }).then((res: any) => {
      if (res.code === 200) {
        setCommentsData(res.data.list);
        setCount(res.data.count);
        setHasMore(res.data.has_more);
      }
    });
  }, [postId]);

  // 加载更多
  const handleLoadMore = () => {
    setPage(page + 1);
  };

  useEffect(() => {
    getCommentListApi({ post_id: postId, page: page }).then((res: any) => {
      if (res.code === 200) {
        setCommentsData([...commentsData, ...res.data.list]);
      }
    });
  }, [page]);

  return (
    <View>
      <View className="text-[14px] text-[#949494] mt-[20px]">
        共 {count} 条评论
      </View>
      <View className="mt-[10px] pb-[100px]">
        <CommentListItem commentData={commentsData} />
        {hasMore && (
          <View
            className="text-[14px] text-[#1874d0] mt-[10px] text-center"
            onClick={() => {
              handleLoadMore();
            }}
          >
            加载更多
          </View>
        )}
      </View>
    </View>
  );
};

export default CommentList;