javascript - 警告.js :45 Warning: flattenChildren(. ..) : Encountered two children with the same key, `.1:$..`

Question

我收到了大量此类错误，一个接一个，警告消息中附加了不同的键。有没有办法根据 id key 找出它们来自哪里？

Answer 1

找出哪里犯了关键错误通常是一件很痛苦的事情，而在 React 15 中，data-reactid 甚至从未渲染到 DOM，这让事情变得更加困难。在普通版本中，只需检查 DOM 并开始查找具有 data-reactid=.1:$.....

的元素。

无论如何，错误来自于在某处手动设置 key 属性，因此请开始在组件中查找它。如果您有一个数组，并为该数组的每个值渲染组件，这通常是一个问题:

var things = [1,2,3,4].map(function(value, index){
  // This will cause Warning: flattenChildren... because
  // every div will be given the same React ID
  return (
    <div key="FIXED_KEY">{value}</div>
  );
})

现在，在这种情况下，您必须手动设置 key ，只需确保该 key 对于同一循环中的每个渲染组件都是唯一的。