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}使它成为一个字符串，所以它始终是相同的。

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

1 个答案: