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就开始要求我在条件条件部分内添加键 - 就像将条件性混合到循环中。但是出于测试目的，我在第一个元素的顶部添加了相同的条件表达式，但是它没有开始抱怨键。

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

我在第二个元素内有一个循环，因为它是一个循环，所以我当然在那里添加一个钥匙，而且这些钥匙也非常独特，而且非常有意义，所以我不明白为什么这会导致问题对于更高的级别。

这是我要控制的错误： 警告：列表中的每个孩子都应具有独特的“密钥”道具。 检查``''的渲染方法

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

Answer 1

我没有详细的解释，但是我想问题与条件代码块中的多个元素有关，而在此块中没有父元素。尝试将元素用＆lt;＆gt;/＆gt;：

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