React实现评论创建后即时渲染，解决useEffect无限循环问题

核心问题是你当前仅在组件初始化时拉取评论，提交新评论后未触发comments状态更新，因此JSX不会重新渲染。直接将comments放入useEffect依赖数组会引发无限循环——因为fetchComments里的setComments会修改comments，进而再次触发useEffect，形成死循环。

以下是两种可行解决方案：

方案1：评论提交成功后重新拉取完整列表 #

这种方式简单直接，适合后端返回完整评论数据的场景：

1. 给CommentForm组件添加回调属性，用于通知父组件评论提交完成
2. 在Post组件中实现该回调，调用fetchComments刷新评论列表

修改后的Post组件代码：

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) => {
            setComments(res.data);
        }).catch((err) => {
            console.log(err);
        })
    }

    // 新增：评论提交成功后的回调
    const handleCommentAdded = () => {
        fetchComments();
    }

    return (
        <div>
            <div>thumbnail image</div>
            <h1>{post.title}</h1>
            <div>this is where body of post will go</div>
            {/* 传递回调给CommentForm */}
            <CommentForm postId={post._id} onCommentAdded={handleCommentAdded}/>
            {comments.map((comment) => (
                <Comment 
                    key={comment._id} // 必须添加唯一key，避免React渲染警告
                    comment={comment.comment} 
                    username={comment.author.username} 
                    time={comment.timeStamp}
                />
            ))}
        </div>
    )
}

修改CommentForm组件，在提交成功的回调中触发父组件的刷新方法：

const CommentForm = ({ postId, onCommentAdded }) => {
    const [commentText, setCommentText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post(`http://localhost:1234/api/posts/${postId}/comments`, {
            comment: commentText
        }).then(() => {
            setCommentText(''); // 清空输入框
            onCommentAdded(); // 通知父组件刷新评论
        }).catch(err => {
            console.log(err);
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <textarea 
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                placeholder="写下你的评论..."
            />
            <button type="submit">提交评论</button>
        </form>
    )
}

方案2：乐观更新（无需重新拉取） #

如果后端会返回新创建的评论对象，可以直接将其添加到本地comments数组中，提升用户体验：

修改Post组件的回调逻辑：

const handleCommentAdded = (newComment) => {
    // 使用函数式更新确保获取最新的state值
    setComments(prevComments => [...prevComments, newComment]);
}

在CommentForm的提交成功回调中，传递后端返回的新评论对象：

axios.post(`http://localhost:1234/api/posts/${postId}/comments`, {
    comment: commentText
}).then(res => {
    setCommentText('');
    onCommentAdded(res.data); // 传递新创建的评论对象
}).catch(err => {
    console.log(err);
})

关键注意事项 #

• 给map渲染的Comment组件添加唯一key属性（比如评论的_id），避免React渲染警告
• 绝对不要把comments放入useEffect的依赖数组，这会导致每次更新评论都重新拉取，触发无限循环

内容的提问来源于stack exchange，提问作者Minchan Jung