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

Posted 2023-02-22

【中文标题】反应警告：flattenChildren（...）：遇到两个具有相同键的孩子，`.$index`

【英文标题】：React Warning: flattenChildren(...): Encountered two children with the same key, `.$index`反应警告：flattenChildren（...）：遇到两个具有相同键的孩子，`.$index`

【发布时间】：2017-09-11 22:28:59

【问题描述】：

在尝试映射和显示我从外部 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 的新手，所以我不确定在哪里寻找解决方案。

非常感谢。

【参考方案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 用双引号括起来使它成为一个字符串，所以它总是一样的。

【讨论】：

谢谢！当然，它奏效了。我的错。花了一个小时和一些东西来寻找问题，呵呵