在复杂的React组件中查找Duplicated Key

时间:2017-07-06 12:00:30

标签: reactjs duplicates key components

我有一个反应组件,它一次生成许多键,我不确定哪一个不是唯一的。错误如下。有什么简单的方法来帮助调试?谢谢!

react.js:19500警告:数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。检查MyGrid的呈现方法。有关详细信息,请参阅https://fb.me/ react-warning-keys。

2 个答案:

答案 0 :(得分:2)

这是一个警告,你没有分配一个密钥,而不是它实际上是唯一的,消息的下一行应该告诉你究竟什么是有问题的元素 - 参见下面的例子{{1} }

in div (created by CardsComponent)

如果你想进一步调试,测试是在warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `CardsComponent`. See fb.me/react-warning-keys for more information. in div (created by CardsComponent)完成的,它只检查元素键是否为空,不检查兄弟键之间的唯一性......

ReactElementValidator.validateExplicitKey

这里有趣的部分是function validateExplicitKey(element, parentType) { if (!element._store || element._store.validated || element.key != null) { return; } // if it gets here it has failed and you will be warned ,其他人通过已经验证的美德

答案 1 :(得分:0)

单击以在控制台中展开错误以显示堆栈跟踪。跟踪直到createElementWithValidation之前的呼叫,它应该显示出罪魁祸首的电话号码。

在此处记录您正在使用的密钥。如果有很多东西,将它们放在一个数组中,然后[].filter((e, i, a) => a.indexOf(e) !== i)