React警告：列表子项需唯一key属性，删除评论时触发该问题求助

1. key值不唯一或不稳定 #

• 别用数组索引当key：删除元素后索引会重排，导致React无法正确识别列表项变化。比如你如果用index作为key，删除中间评论后，后续评论的key会自动变更，触发警告。
• 必须用评论的唯一标识当key：比如数据库返回的commentId，要保证每个评论的key在列表里绝对独一无二。

2. key的位置错误 #

• key必须直接加在循环渲染的最外层组件/元素上，不能放在组件内部的元素上。举个例子：
  错误写法：

  // 把key加在了Comment组件内部的根元素上，父组件循环时没设key
  {comments.map(comment => <Comment comment={comment} />)}
  

  正确写法：

  // key直接放在map返回的Comment组件标签上
  {comments.map(comment => <Comment key={comment.commentId} comment={comment} />)}
  

3. 状态更新后列表存在重复key #

• 检查删除评论的逻辑：删除操作后更新comments状态时，有没有正确过滤掉目标评论？会不会不小心保留了重复的评论对象，导致两个评论共用同一个key？

4. 嵌套列表的key冲突 #

• 如果评论包含子评论（嵌套列表），子列表的key需要单独设置，不能和父评论的key重复，也不能复用父元素的索引。

针对你的代码的排查步骤 #

1. 先看PostDetail.tsx里渲染评论列表的循环代码：确认key用的是评论的唯一ID（比如comment.id），而非索引或其他可能重复的值。
2. 检查删除评论的状态更新逻辑：删除后生成的新comments数组里，有没有重复的ID或者遗漏删除的情况？
3. 确认Comment.tsx的key是由父组件（PostDetail）在循环时设置的，组件内部不需要再设置key——key是给React识别列表项用的，由渲染列表的父组件提供。

如果还是没解决，把你代码里渲染评论的循环片段和删除评论的状态更新逻辑贴出来，能更快定位问题。

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