React中如何定位数组内单个对象ID实现单条评论编辑功能？

问题根源 #

你当前的所有评论共用了同一个布尔类型的全局编辑状态，只要这个状态变为true，所有遍历渲染的评论都会命中编辑态的判断逻辑，自然全部进入编辑模式。

修改方案 #

1. 调整状态存储逻辑

将原来存储布尔值的状态，改为存储当前正在编辑的评论唯一ID，默认值设为null：

// 替换原来的 useState(false)
const [editingCommentId, setEditingCommentId] = useState(null)

2. 修改编辑按钮的点击逻辑

点击编辑按钮时，传入当前点击条目的评论ID赋值给状态：

// 替换原来的编辑按钮代码
<i className="singlePostIcon fas fa-edit" onClick={() => setEditingCommentId(singleComment._id)} ></i>

注意：如果你map遍历的第二个参数是数组索引，不要用索引当ID，要取评论自身的唯一标识字段（比如singleComment._id）避免错乱。

3. 调整编辑态判断条件

只有当前遍历的评论ID和状态中存储的编辑ID一致时，才显示编辑框：

// 替换原来的 updateComment ? 判断
{editingCommentId === singleComment._id ? (
  // 编辑框原有代码不变
) : (
  // 普通展示评论原有代码不变
)}

4. 补充退出编辑的逻辑

在提交更新的handleCommentUpdate函数执行完成后，重置状态退出编辑模式：

const handleCommentUpdate = () => {
  // 原有更新评论的逻辑不变
  // 最后加这行
  setEditingCommentId(null)
}

如果需要加取消编辑按钮，点击事件同样调用setEditingCommentId(null)即可。

额外优化提示

你当前的key属性绑在了编辑态的div上，应该绑定在map返回的最外层根元素上，避免React渲染警告：可以把原来的空标签<>换成<React.Fragment key={singleComment._id}>。

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