在复杂的 React 组件中查找重复键 [英] Find Duplicated Key in a complicated React component

问题描述

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

I have a react component, which generate many keys for a time, I am not sure which one is not unique. The error is as below. Any easy way to help debugging? thanks!

react.js:19500 警告:数组或迭代器中的每个孩子都应该有一个唯一的key"道具.检查MyGrid 的渲染方法.有关详细信息，请参阅 https://fb.me/react-warning-keys.

react.js:19500 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MyGrid. See https ://fb.me/ react-warning-keys for more information.

推荐答案

这是一个警告，你没有分配一个键，而不是它实际上不是唯一的，消息的下一行应该告诉你究竟是什么违规元素 - 请参阅下面的示例 in div(由 CardsComponent 创建)

This is a warning that you have NOT assigned a key, rather than it isn't actually unique, the next line of the message should tell you exactly what is the offending element - see an example below in div (created by CardsComponent)

warning.js:36 警告:数组或迭代器中的每个孩子都应该有一个唯一的key"道具.检查 `CardsComponent` 的渲染方法.有关更多信息，请参阅 fb.me/react-warning-keys.在 div 中(由 CardsComponent 创建)

如果你想进一步调试，测试在 ReactElementValidator.validateExplicitKey 中完成，它只是检查元素键是否为非空，不检查兄弟键之间的唯一性...

If you want to debug further the test is done in ReactElementValidator.validateExplicitKey which simply does a check for if the element key being non null, no checking of uniqueness amongst sibling keys...

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

这里有趣的部分是 element.key != null 因为其他部分已经通过验证了

The interesting part here being element.key != null as the others pass as virtue of already having been validated

这篇关于在复杂的 React 组件中查找重复键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！