在复杂的 React 组件中查找重复键

Posted 2023-02-22

【中文标题】在复杂的 React 组件中查找重复键

【英文标题】：Find Duplicated Key in a complicated React component

【发布时间】：2017-12-10 10:10:36

【问题描述】：

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

react.js:19500 警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查MyGrid的渲染方法。请参阅 https://fb.me/react-warning-keys 了解更多信息。

【问题讨论】：

请粘贴您的代码

【参考方案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

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

【讨论】：

alechill，如何使用validateExplicitKey函数调试？怎么称呼它？看起来你修剪了函数的结尾

【参考方案2】：

单击展开控制台中的错误以显示堆栈跟踪。将呼叫跟踪到createElementWithValidation 之前的呼叫，它应该会向您显示罪魁祸首的行号。

记录您在那里使用的密钥。如果有很多，把它们放在一个数组中，然后[].filter((e, i, a) => a.indexOf(e) !== i)