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

Question

我有一个 react 组件，它一次生成很多键，我不确定哪个不是唯一的。错误如下。有什么简单的方法可以帮助调试吗？谢谢!

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

Answer 1

这是一个警告，表明您尚未分配键，而不是它实际上不是唯一的，消息的下一行应该告诉您到底什么是有问题的元素 - 请参阅下面的示例 in div (由 CardsComponent 创建)

warning.js:36 警告:数组或迭代器中的每个子项都应该有一个唯一的“key”属性。检查`CardsComponent`的渲染方法。请参阅 fb.me/react-warning-keys 了解更多信息。 在div(由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 因为其他部分已经通过验证而通过