无法定位React中缺失key属性的子元素，请求排查警告问题

我之前也碰到过这种明明知道是key的问题，但死活找不到在哪的情况，太闹心了！结合你给出的堆栈跟踪信息，咱们一步步来揪出问题所在：

先从堆栈提示的关键位置入手 #

你的堆栈里明确标了几个关键文件和行号：

• withTranslation.js:7
• ConnectedProtectedRoutes.js:26 和 44

先重点排查这几个位置：

• ConnectedProtectedRoutes.js：第26行是被Route包裹的hoc组件，第44行是Route本身。看看这两行附近有没有渲染数组生成的组件列表——比如权限路由的列表、页面导航项、或者根据权限动态生成的组件集合？比如用map循环渲染Route组件的场景很常见，这里很容易漏加key。
• withTranslation.js：第7行对应的hoc组件，有没有在多语言逻辑里渲染了列表？比如多语言选项、或者根据语言包生成的元素数组？

排查Redux Connect包裹的组件 #

堆栈里多次提到Connect(hoc)，说明这个被Redux连接的组件大概率是从store里获取了数组数据，然后直接渲染却没加key。打开这个hoc组件，找所有用到map生成React元素的地方，检查每个循环出来的元素有没有加唯一的key prop。

用React DevTools精准定位（终极技巧） #

如果肉眼扫代码找不到，直接用React DevTools来抓：

1. 打开浏览器的React DevTools，切换到「Warnings」面板，找到这个key警告。
2. 点击警告下方的组件栈，直接跳转到对应的组件实例。
3. 在组件树里找带有(missing key)标记的元素——这些就是没加key的列表子元素，点进去就能看到它的父组件是哪个，进而找到代码位置。

容易忽略的细节 #

• 别用数组索引当key（除非你的列表永远不会增删、排序），尽量用数据本身的唯一标识，比如item.id、route.path这类不会重复的值。
• 有时候不是直接的map循环，比如用了数组展开{...someArray}或者第三方组件内部渲染了列表但需要你传key，这种情况要仔细看组件文档。

举个常见的错误示例：

// 错误：没加key
{protectedRoutes.map(route => (
  <Route path={route.path} component={route.component} />
))}

// 正确：加上唯一key
{protectedRoutes.map(route => (
  <Route key={route.id} path={route.path} component={route.component} />
))}

如果还是找不到，可以把上述关键位置的代码片段贴出来，咱们再细揪！

内容的提问来源于stack exchange，提问作者Return-1