React抱怨div中的唯一键有两个静态元素

Question

我理解在循环中创建元素时应该有唯一的键属性。

但我不明白的是为什么React抱怨这种情况，没有循环，只有2个元素总是，特别是为什么它抱怨的关键只与第二个元素相关，显然不需要唯一的关键为第一个popOverBlockContent:

return (
<div>
<PopOverBlockContent>
...contents removed
</PopOverBlockContent>

{results && (
<PopOverBlockContent key={2}>
...contents removed
{results.map((result) => (
<div key={result.id}>

<PopoverDataRows
key={result.id}
...etc...
/>
</div>
</PopOverBlockContent>
)}
</div>
)

我在代码的其他部分也看到了这种模式——只要我添加了一个条件表达式，react就开始要求我在条件部分中添加key元素——就像它将条件性与循环混合在一起一样。但出于测试目的，我在第一个元素的顶部添加了相同的条件表达式，但它并没有开始抱怨键。

我尝试为第二个元素添加key={2}，并尝试将key={1}添加到第一个元素，但这些组合都没有解决问题。对于我在div中列出的这两个ui组件，永远不会有任何真正的键可用，所以我不明白为什么像值1和2这样的东西在这里不起作用。

我在第二个元素里面有一个循环，因为它是一个循环，我当然在那里添加了一个键，这些键是完全唯一的，也工作得很好，很有意义，所以我不明白为什么这会给高层带来问题。

这是我得到控制台的错误:警告:列表中的每个子元素都应该有一个唯一的"键"。道具。检查' '

的渲染方法

163 |       )}
164 |       {results && (
> 165 |         <PopOverBlockContent key={2}>
|         ^

Answer 1

我没有详细的解释，但我猜问题与在条件代码块中分组的多个元素有关，而在该块中没有父元素。尝试用<></>:

包装元素

<div>
<PopOverBlockContent>
...contents removed
</PopOverBlockContent>

{results && (
<>
<PopOverBlockContent key={2}>
...contents removed
{results.map((result) => (
<div key={result.id}>
...contents removed
</div>
</PopOverBlockContent>
</>
)}
</div>