javascript - react 警告 : flattenChildren(. ..) : Encountered two children with the same key, `.${index}`

Question

当我尝试映射和显示我从外部 API 获得的项目时，我收到错误消息说有相同 key 的 child ，即使我知道 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} 用双引号括起来使它成为一个字符串，所以它总是一样的。