React中Comments子组件增删评论后不重新渲染问题求助

核心问题 #

评论增删后无法即时渲染的根源在于：

1. 状态不同步：SinglePost组件单独维护了comments状态，但传给Comments组件的是post.comments。增删操作仅更新独立的comments状态，未同步更新post对象内的comments字段，导致Comments组件接收的始终是初始值。
2. 错误的状态更新格式：handleAddComment将数组类型的comments改为对象结构，破坏数据格式导致渲染失败。
3. 回复状态孤立：Comments组件内部维护的comments状态与父组件post.comments脱节，回复后无法同步到全局状态。

解决方案 #

1. 合并状态，直接操作post对象 #

删除SinglePost中独立的comments状态，所有评论操作直接更新post内的comments字段：

// 移除这行：const [comments, setComments] = useState([]);

// 修改添加评论的回调
const handleAddComment = (newlyComment) => {
  setPost(prev => ({
    ...prev,
    comments: newlyComment
  }));
};

// 修改删除评论的回调
const handleDeleteComment = (deletedCommentId) => {
  setPost(prev => ({
    ...prev,
    comments: prev.comments.filter(item => item._id !== deletedCommentId)
  }));
};

2. 清理Comments组件的冗余状态 #

删除Comments组件内的post和comments局部状态，直接使用父组件传入的props.post.comments渲染：

// 移除这两行：
// const [post, setPost] = useState({});
// const [comments, setComments] = useState([]);

3. 同步回复功能的状态更新 #

在Comments组件中添加父组件回调，回复后同步更新post状态：

// Comments组件定义
const Comments = (props) => {
  // ...其他代码

  const handleCommentSubmit = async (commentId, reply) => {
    try {
      const replyText = await axios.put(
        "/posts/replycomment",
        { postId: props.post._id, commentId: commentId, reply: reply },
        { headers: { token: "Bearer " + user.token } }
      );
      // 调用父组件回调更新评论
      props.onUpdateComments(replyText.data.comments);
      setReplyFormStates(prevState => ({
        ...prevState,
        [commentId]: false,
      }));
    } catch (err) {
      console.log(err);
    }
  };

  // ...其他代码
};

在SinglePost中添加对应回调并传入Comments：

const handleUpdateComments = (updatedComments) => {
  setPost(prev => ({
    ...prev,
    comments: updatedComments
  }));
};

// 渲染Comments组件
<Comments 
  post={post} 
  onDeleteComment={handleDeleteComment} 
  onAddComment={handleAddComment}
  onUpdateComments={handleUpdateComments}
/>

4. 修正初始加载逻辑 #

在SinglePost的初始加载useEffect中，移除冗余的setComments调用，并补充依赖项避免闭包问题：

useEffect(() => {
  const getPost = async () => {
    const res = await axios.get("/posts/" + path);
    setPost(res.data);
    setTitle(res.data.title);
    setDesc(res.data.desc);
    setLike(res.data.likes.length);
    // 移除这行：setComments(res.data.comments);
    if (user && user.favPosts.includes(res.data._id)) {
      setIconColor("red");
    }
  };
  getPost();
}, [path, user]); // 添加path和user作为依赖

效果验证 #

修改后，新增/删除/回复评论时，post.comments会实时更新，Comments组件接收新props后自动重新渲染，无需刷新浏览器即可看到最新状态。

内容的提问来源于stack exchange，提问作者Sohaib Abullah