反应警告：flattenChildren（...）：遇到两个具有相同键的孩子，`.${index}`

Question

在尝试映射和显示我从外部 api 获得的项目时，我收到错误消息，指出有相同密钥的孩子，即使我知道 ID 不同并且只显示第一张卡片。

这会引发错误，不管我使用{test.id} 还是{index} 作为键：

 {tests.map( test =>
       <Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}">
         <Card title={test.title} bordered={false}>{test.content}</Card>
       </Col> )}

但另一方面，当我尝试以简单的<ul> 显示它时：

{tests.map( test =>
  <li className="list-group-item" key={test.id}>
    {test.title}
  </li>
)}

一切正常，我显示了我收到的所有物品。

我还是 React 和 Redux 的新手，所以我不确定在哪里寻找解决方案。

非常感谢。

Answer 1

改变这一行：

   <Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}">

到

   <Col span="8" xs={{span:22}} md={{span:6}} key={test.id}>

{test.id} 用双引号括起来使它成为一个字符串，所以它总是一样的。