如何摆脱 - 警告：列表中的每个孩子都应该有一个独特的"key"道具

Question

如何摆脱此警告。我讨厌在控制台上看到它。我觉得我做的每件事都很好，但我一直收到这个警告。这就是我正在做的：

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

我不知道这个堆栈是否有任何相关性，但我使用的是Nextjs和鞋带。

Answer 1

您没有将key定位在地图回调中的第一个节点上。

用显式<反应片段>语法可能有键。这方面的一个用例是将集合映射到碎片

签出该页面的最后一部分。

所以你的代码应该变成：

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

Answer 2

key={i}应该放在外部<></>元素上，为了实现这一点，您需要将它们转换为完整的<Fragment>元素。

更新代码：

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

PS I还将其缩短为不使用不需要的CCD_ 5。