React渲染单元素评论数组仍出现‘Encountered two children with the same key, `1`.’警告的解决方法

嘿，这个问题我太熟了！你遇到的"Encountered two children with the same key, '1'."警告，根源其实在你给评论列表设置key的方式上。

你看，你现在把props.product.id作为每个评论Card的key——这就意味着所有评论项的key都是同一个值（比如例子里的'1'）。哪怕你的评论数组里只有一条评论，只要页面上还有其他组件也用了这个key，或者React的diff算法识别到重复的key标识，就会抛出这个警告。

具体的解决办法，按优先级排序： #

• 优先用评论自身的唯一ID：如果你的comment不是纯字符串，而是带唯一标识的对象（比如每个评论都有comment.id），直接用这个ID作为key是最稳妥的，因为它天然唯一且稳定：

  // 假设comment是包含id的对象
  let content = props.comments.map((comment) => (
    <Card key={comment.id} className="shadow" body>
      <p>{comment.content}</p>
    </Card>
  ))
  

• 用数组索引兜底（静态列表适用）：如果评论就是纯字符串、没有自己的唯一ID，可以在map的时候加上索引参数，用索引作为key。不过要注意：如果你的评论列表后续会有排序、新增、删除操作，索引作为key可能导致React渲染异常，所以只建议在静态列表里用：

  let content = props.comments.map((comment, index) => (
    <Card key={index} className="shadow" body>
      <p>{comment}</p>
    </Card>
  ))
  

• 拼接生成唯一key：如果以上两种都不适用，可以把产品ID和索引拼接起来，生成一个唯一的key，确保每个评论项的key不会和其他组件重复：

  let content = props.comments.map((comment, index) => (
    <Card key={`${props.product.id}-${index}`} className="shadow" body>
      <p>{comment}</p>
    </Card>
  ))
  

简单来说，React需要通过key来区分列表里的每一项，重复的key会打乱它的diff算法逻辑，所以只要保证每个列表项的key是唯一的，这个警告就会消失啦～

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