我创建了一个注解部分，我希望能够创建一个注解，并立即在注解部分显示它，但我不知道如何在状态更改后重新呈现jsx。将状态置于useEffect依赖项中会创建无限循环。希望你能帮忙。

const Post = (props) => {

    const [post, setPost] = useState([]);
    const [comments, setComments] = useState([]);
    const {id} = useParams();
    
    useEffect(() => {
        fetchData();
        fetchComments();
    }, [])

    const fetchData = () => {
        axios.get(`http://localhost:1234/api/posts/${id}`).then((res) => {
            setPost(res.data);
        }).catch((err) => {
            console.log(err);
        })
    }

    const fetchComments = () => {
        axios.get(`http://localhost:1234/api/posts/${id}/comments`).then((res) => {
            console.log(res)
            setComments(res.data);
        }).catch((err) => {
            console.log(err);
        })
    }

    console.log(comments)

    return (
        <div>
            <div>thumbnail image</div>
            <h1>{post.title}</h1>
            <div>this is where body of post will go</div>
            <CommentForm postId={post._id}/>
            {comments.map((comment) => (
                <Comment comment={comment.comment} username={comment.author.username} time={comment.timeStamp}/>
            ))}
        </div>
    )
}