ESLint 错误：列表中的每个孩子都应该有一个唯一的“关键”道具

Posted 2023-02-22

【中文标题】ESLint 错误：列表中的每个孩子都应该有一个唯一的“关键”道具

【英文标题】：ESLint Error: Each child in a list should have a unique "key" prop

【发布时间】：2020-08-10 07:40:25

【问题描述】：

我有一个如下所示的 JSON 字符串。该字符串有 \n 用于下一行。

data:a:"A computer is a machine that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks. A "complete" computer including the hardware, the operating system (main software), and peripheral equipment required and used for "full" operation can be referred to as a computer system. This term may as well be used for a group of computers that are connected and work together, in particular, a computer network or computer cluster.\nComputers are used as control systems for a wide variety of industrial and consumer devices. This includes simple special purpose devices like microwave ovens and remote controls, factory devices such as industrial robots and computer-aided design, and also general-purpose devices like personal computers and mobile devices such as smartphones. The Internet is run on computers and it connects hundreds of millions of other computers and their users."

我在 React 中使用它，如下所示：

const b = data.a.split("\n");
return(
<P>
b.map((p,index)=>(p<br key=index/>))
</p>

对于上述代码，我收到了 ES lint 警告。警告如下。

Each child in a list should have a unique "key" prop.

我怎样才能避免警告？我需要段落标记中的文本，并且文本中的每个换行符 (\n) 替换为 <br/>

【问题讨论】：

这能回答你的问题吗？ Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

@wentjun 看起来很相似，但在这里我遇到了不同的问题。如果我曾经喜欢我标记的正确方法，那么我需要删除 CSS 中的填充和边距。因此我使用上述方法。

【参考方案1】：

b.map((p,index)=>(<p key=index>p</p>))

您需要包装元素上的键。只需使用p 标签，即可免费获得换行符。 ;)

不过，使用索引作为键是 bad idea 是有原因的。

【讨论】：

是的，我遇到了填充问题，因此，我尝试使用有问题的方法。现在我删除填充并使用此方法。感谢您的帮助。

【参考方案2】：

您需要将key 属性设置为从map 返回的项目，而不是<br> 元素。

试试这样的：

<P>
   React.Children.toArray(b.map((p,index)=>(p<br/>))) 
</p>