警告：创建表格时，列表中的每个孩子都应该有一个唯一的"key"道具

Question

我是React的新手。我想删除此警告。我试着探索Web并尝试了许多解决方案，但没有一个对我有效(key、rowkey、loop等(

错误：

检查RankingTable的渲染方法tr中(由RankingTable创建(在排名表react_devtools_backend.js:2540:25 中

你对这个问题有想法吗？

return (
<div className = "overflow-x-auto">
<table className="ranking_table table-auto border-collapse w-full" >
<caption className="sr-only">{ caption }</caption>
<thead>
{
fields.map((field) => (
<tr>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>
<tbody>
{
rows.map((row, loop) => ( 
<tr key={row.key}>
<td>
<span className={`rounded-full rank ranking-${loop + 1}`}>{ loop + 1 }</span> { row.username }, 
</td>
<td>
{ row.cntTotal }
</td>
<td>
{ row.cntExact }
</td>
<td>
{ row.cntGood }
</td>
</tr>
))
}
</tbody>
</table>
</div>
)

谢谢！

Answer 1

键帮助React识别哪些项目已经更改、添加或删除。应该为数组中的元素提供密钥，以使元素具有稳定的身份。内容来源https://reactjs.org/docs/lists-and-keys.html#keys

您必须为映射的每次迭代传递密钥中的唯一值。在循环外迭代中不能重复。如果每个对象的字段中都存在一个唯一的id或任何唯一的值，则可以将其传入key。

<thead>
{
fields.map((field) => (
<tr key={field.<id or something that is unique>}>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>

Answer 2

正如@Shawn Yap所说，映射中缺少key。一定要用一些独特的东西。

选择键的最佳方法是使用一个字符串，该字符串在其同级项中唯一标识列表项。大多数情况下，您会使用数据中的ID作为密钥。

更新后的thead应该如下所示：

<thead>
{
fields.map((field) => (
<tr key={field.<id or something that is unique>}>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>