React状态更新后组件未重渲染：MUI卡片展开折叠失效问题

问题根源分析 #

1. 直接修改原状态数组导致不重渲染
   你在第一个handleComment里直接修改了posts数组中元素的expanded字段，然后调用setPosts(posts)。由于数组本身的引用没有变化，React会认为状态没有更新，因此不会触发组件重渲染。

2. forEach使用错误导致数据丢失
   forEach方法没有返回值（默认返回undefined），你把newPosts赋值为posts.forEach(...)的结果，相当于将状态设置为undefined，所以组件只会显示加载中的CircularProgress。

正确实现代码 #

const handleComment = (id) => {
  // 通过map创建全新数组，保证引用变化
  const newPosts = posts.map(post => {
    if (post.pId === id) {
      // 复制原post对象并修改expanded字段，不改动原对象
      return {
        ...post,
        expanded: post.expanded === "" ? id : ""
      };
    }
    // 未匹配的post直接返回原对象
    return post;
  });
  setPosts(newPosts);
};

额外注意点 #

检查初始渲染时的字段一致性：你在初始化posts时添加的是postId: doc.id，但handleComment里判断的是post.pId === id，两者字段名不匹配会导致无法找到目标帖子，需要统一为postId或pId。

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