如何解决列表渲染警告：Each child in a list should have a unique "key" prop

问题原因 #

你触发的是React列表渲染的唯一key警告，问题出在key的绑定位置不符合要求：你将key={i}绑定在了内层的<sl-details>组件上，但map循环返回的最外层根节点是<></>（React Fragment简写语法），React要求key必须绑定在map返回的最外层根节点上，绑定在内层子节点无法被识别，因此持续触发警告。 #

解决方案 #

二选一即可：

方案1：给Fragment绑定key #

使用完整的<React.Fragment>语法替换简写的<></>，将key绑定在Fragment上：

{reviews.map((review, i) => {
  return (
    <React.Fragment key={i}>
      <sl-details summary={`${review.name}`} open>
        <p>{review.review}</p>
      </sl-details>
      <br />
    </React.Fragment>
  );
})}

方案2：用普通DOM节点包裹 #

新增一个外层DOM节点（比如div）包裹所有内容，将key绑定在这个外层节点上：

{reviews.map((review, i) => {
  return (
    <div key={i}>
      <sl-details summary={`${review.name}`} open>
        <p>{review.review}</p>
      </sl-details>
      <br />
    </div>
  );
})}

优化建议 #

如果你的review数据中有唯一ID字段（比如review.id），建议将key替换为唯一ID，而非数组索引，避免列表增删、排序时出现渲染异常。

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