如何利用栈追踪定位React项目列表key属性报错的具体代码位置

第一步：过滤无效栈信息 #

你看到的栈追踪从上到下是组件的嵌套顺序，越靠上的组件层级越靠近报错的最内层。排查时只需要保留路径包含./src/的行，剩下包含node_modules、.cache的行都是第三方依赖、框架缓存代码，和你的业务逻辑无关，可以直接忽略。
你提供的栈里最靠近顶部的自有业务组件是：

ContentWrapper (webpack-internal:///./src/components/content-wrapper.js:26:23)

这说明缺key的列表渲染逻辑就在这个组件内部，不需要排查其他组件。

第二步：高效排查缺key问题，无需逐行遍历代码 #

方案1：编辑器直接标红报错（推荐） #

安装ESLint的React规则插件eslint-plugin-react，开启react/jsx-key规则，之后所有列表渲染缺key的位置都会直接在你的编辑器里标红，点击即可跳转到对应代码行。

方案2：针对性排查ContentWrapper组件 #

打开/src/components/content-wrapper.js文件，只需要找两类逻辑：

• 直接写在JSX里的.map遍历返回JSX元素的代码
• 先把遍历生成的JSX数组存在变量里，再放到JSX中渲染的代码
  上述两类场景只要没加key属性就是报错根源。

方案3：用React DevTools定位 #

打开浏览器React DevTools插件，搜索找到ContentWrapper组件，查看它的直接子元素，找到批量生成的重复类型元素，对应回代码就能找到缺key的位置。

常见疑问说明 #

你点击警告跳转到底层依赖代码是正常现象：这个警告本身是react-dom开发包抛出的，跳转默认会定位到抛警告的React源码位置，不是你写的业务代码位置，所以需要你自己按上述方法过滤栈信息找自有组件即可。

内容的提问来源于stack exchange，提问作者Anon Eemus