warning.js:45 警告：flattenChildren(...): 遇到两个具有相同键的孩子，`.1:$..`答案

【问题标题】：warning.js:45 Warning: flattenChildren(...): Encountered two children with the same key, `.1:$..`warning.js:45 警告：flattenChildren(...): 遇到两个具有相同键的孩子，`.1:$..`
【发布时间】：2016-07-10 21:39:28
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>
  );
})

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

【讨论】：