React函数组件.map渲染列表时实现指定div单独显隐问题咨询

你说的结论完全正确，通过.map()批量渲染列表元素时，使用单一布尔状态控制显隐会导致所有元素同步触发状态变化，必须通过元素的唯一ID/索引标记目标控制对象才能实现单元素显隐。

具体修改方案 #

1. 替换控制显隐的状态 #

把原来的布尔类型toggle状态替换为存储当前展开评论区的帖子ID，默认值为null（表示无展开的评论区）：

// 替换原来的 const [toggle, setToggle] = useState(false);
const [expandedPostId, setExpandedPostId] = useState(null);

2. 修改评论图标点击逻辑 #

点击时判断当前点击的帖子ID是否为已展开的ID，是则收起，否则切换为当前帖子ID：

<ChatBubbleOutlineIcon
  onClick={() => setExpandedPostId(expandedPostId === post._id ? null : post._id)}
  className="dashboard__actionComment"
/>

你原来的两段相同的图标逻辑可以合并，不需要用三元重复写相同组件

3. 调整评论区显隐判断 #

仅当存储的展开ID等于当前遍历到的帖子ID时，才添加显示类：

<div
  className={
    expandedPostId === post._id
      ? "dashboard__commentContent toggle"
      : "dashboard__commentContent"
  }
>

可选优化项 #

• 列表渲染的key不要用索引i，替换为post._id，避免列表数据顺序变化时出现渲染异常：

  {posts.map((post) => (
    <div className="dashboard__post" key={post._id}>
  

• 全局的评论输入状态comment和评论遍历的变量comment重名，建议修改为newComment避免变量冲突：

  // 原 const [comment, setComment] = useState();
  const [newComment, setNewComment] = useState();
  // 对应输入框的onChange和submitComment逻辑也同步替换变量名即可
  

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