react.development.js:220 警告：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：react.development.js:220 Warning: Each child in a list should have a unique "key" propreact.development.js:220 警告：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-04-25 05:07:02
【问题描述】：

我有以下代码导致以下警告消息

react.development.js:220 警告：列表中的每个孩子都应该有一个独特的“关键”道具。

          {data.map(item => (
            <tr>
              <td key={item.key}>{item.Number}</td>
              <td key={item.key}>{item.Name}</td>  
              <td key={item.key}>{item.LastName}</td>
              <td key={item.key}>{item.Reason}</td>
            </tr>
          ))}

我尝试了多种不同的方法来消除错误，但均无济于事。但仍然出现以下错误。我该怎么做才能摆脱错误？

编辑：

我将其更改为以下内容，我不再收到错误。

          {data.map((item, i) => (
            <tr key={i}>
              <td>{item.Number}</td>
              <td>{item.Name}</td>  
              <td>{item.LastName}</td>
              <td>{item.Reason}</td>
            </tr>
          ))}

【问题讨论】：

key 属性仅对列表的顶部元素是必需的，在 htis 情况下是您的 tr 元素（由于您的 data.map((item) => (...)
您是否尝试将密钥添加到tr 元素？
不幸的是，即使我将它放在元素中，它仍然会发生
我用一个可行的解决方案编辑了这个问题

【解决方案1】：

key prop 需要添加到列表中的顶级元素，因此在本例中为 tr 元素。它应该包含来自被映射项目的唯一标识项目的值，因此如果定义了 item.key 并且对于该列表项目是唯一的，那么这应该可以解决问题：

{data.map(item => (
   <tr key={item.key}>
     <td>{item.Number}</td>
     <td>{item.Name}</td>  
     <td>{item.LastName}</td>
     <td>{item.Reason}</td>
   </tr>
))}

请注意，您应该尽可能避免使用索引，因为这可能会导致意外的行为/性能问题。这在React documentation中进行了解释

【讨论】：

不幸的是，即使我将它放在元素中，它仍然会发生
我用一个可行的解决方案编辑了这个问题
@Arya 你对我的回答在功能上没有什么不同，只要item.key 对每个项目都是相同的，除了你的（使用索引）肯定是错误的并且可能导致意外行为。
看起来 item.key 是空白的，这就是为什么我在使用您的答案时仍然会收到该错误。
好的。我将编辑我的答案，以便尽快明确在这种情况下该怎么做。