React状态更新后评论及评论数未实时渲染问题求助

调用子组件Comments的handleCreateComment创建评论后，state已更新，但新评论无法实时渲染，评论数量也不同步，必须刷新页面才显示最新内容。需要让统计评论数的commentAmount函数在状态变更后自动执行，显示正确数量。

问题1：创建评论后无法实时渲染 #

handleCreateComment由子组件Comments调用，但即使更新了state，新评论也不会渲染。

// 创建评论
handleCreateComment = async (Comment, foodId, UserId) => {
  createComment(Comment, foodId, UserId).then((res) => {
    const newComment = res.data;
    const newComments = [...this.state.Comments, { newComment }];
    this.setState({ Comments: newComments });
  });
};

问题2：评论数量无法自动更新 #

commentAmount在Posts组件中调用，用于显示特定帖子的评论数，希望状态变更后该函数也能被调用，显示正确的评论数量。

commentAmount(food) {
  const comments = this.state.Comments.filter(
   (comment) => food === comment.foodId
  );
  return comments.length;
 }

Posts组件中的调用方式 #

在Posts组件的JSX中，通过如下方式调用commentAmount函数显示评论数，同时渲染Comments组件。

// 希望用户创建评论时自动调用这个函数，显示对应帖子的正确评论数
<u> {this.commentAmount(food.id)}</u>;

<Comments
  user={this.props.user}
  username={username}
  admin={admin}
  foodId={food.id}
  UserId={id}
  Comments={this.state.Comments}
  handleDeleteComment={this.handleDeleteComment}
  handleCreateComment={this.handleCreateComment}
/>

Comments组件代码 #

以下是Comments组件，所有评论在同一个数组中，后端返回的帖子数据不包含评论，因此需要对评论进行过滤。

function Comments({
  foodId,
  UserId,
  Comments,
  admin,
  handleDeleteComment,
  user,
  handleCreateComment,
}) {
  return (
    {Comments.filter((comments) => {
      return comments.foodId === foodId;
    }).map((comment) => {
      return (
        // 渲染评论的JSX代码
      )
    })}
  );
}
export default Comments;

解决方案 #

1. 修复新评论无法渲染的问题 #

你在构造newComments时错误地把newComment包裹在了一个额外对象中，导致新评论的结构和原有评论不一致，过滤和渲染时匹配不到foodId字段。修改handleCreateComment：

handleCreateComment = async (Comment, foodId, UserId) => {
  createComment(Comment, foodId, UserId).then((res) => {
    const newComment = res.data;
    // 直接将新评论加入数组，不要额外包裹对象
    const newComments = [...this.state.Comments, newComment];
    this.setState({ Comments: newComments });
  });
};

2. 确保评论数量自动更新 #

React组件在state变更后会自动触发重新渲染，只要commentAmount函数依赖的this.state.Comments更新，组件重新渲染时就会自动调用该函数计算最新数量。修复第一个问题后，评论数量会随state更新自动同步显示。

额外检查点 #

• 确认后端返回的res.data包含正确的foodId字段，否则过滤时依然无法匹配对应帖子
• 检查Comments组件中filter的条件是否正确（当前代码中comments.foodId === foodId逻辑正确，只要评论结构无误即可匹配）

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