warning.js:45警告:flatchChildren(..）:遇到两个具有相同密钥`.1:$.`的孩子

warning.js:45 Warning: flattenChildren(...): Encountered two children with the same key, `.1:$..`

本文关键字：密钥 孩子 警告 js flatchChildren 遇到 两个 warning      更新时间：2023-09-26

我收到了很多这样的错误，一个接一个地在警告消息中附加了不同的键。有没有一种方法可以根据id密钥找到它们的来源？

找出关键错误的位置通常很痛苦，而在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>
  );
})

现在，在这种情况下，需要手动设置关键帧，只需确保关键帧对于同一循环中的每个渲染组件都是唯一的。

相关文章：