如何对React进行交互式调试 解决对象无法作为React子元素报错

优先尝试的低成本定位方法 #

无需逐行排查业务代码，直接打印完整报错对象即可匹配你项目里的对应变量：

• 打开浏览器控制台的「Pause on uncaught exceptions」开关（Sources面板右上角的停止图标，点亮后带小感叹号的选项），刷新页面复现报错，代码会在抛出该错误的位置自动暂停，此时在控制台输入当前作用域里的报错对象变量，就能看到完整的键列表、值内容，直接对应到你业务里的具体数据。
• 如果上述方法看不到完整对象，可以临时修改React开发版的报错逻辑：在 /node_modules/react/cjs/react.development.js 中搜索 Objects are not valid as a React child 字符串，在 throw Error 代码前插入一行 console.log('报错的完整对象：', invalidObject)，重启项目后控制台会直接输出完整对象结构。

常见漏查的错误写法 #

绝大多数时候你不是故意直接渲染对象，以下隐性写法很容易触发该报错：

• 传参位置错误：把props参数写在了组件children的位置，比如误写为 <Card>{ {id: xx, ref: xx} }</Card>，正确写法应为 <Card data={ {id: xx, ref: xx} } />
• 条件返回错误：比如三元表达式的返回分支误返回了对象 {showInfo ? userInfo : '-'}，其中userInfo是带id、ref的对象
• 解构赋值错误：把对象整体当成值渲染，比如 const user = props 而不是 const {user} = props，后续直接写了 {user} 渲染

交互式调试进阶操作 #

如果需要追踪调用链路：

• 安装React DevTools浏览器扩展，打开「Components」面板，勾选设置里的「Highlight updates when components render」，复现报错前观察最近更新的组件，即可快速缩小排查范围到少数几个组件。
• 断点命中时查看调用栈，点击调用栈里最近的业务代码文件（而非React源码文件），就能直接跳转到触发渲染的业务代码行。

内容的提问来源于stack exchange，提问作者Dave Mcsavvy