react嵌套多层问题排查

发布时间 2023-09-27 08:37:26作者: 看风景就

杭州参与的一个项目中遇到一个react模块(人资),封装很多,嵌套层次很多,而且子组件全部使用 props传递,跟踪很困难

第一次排查,推测出应该是一个枚举缺少枚举项,但是数据传递流程未搞清楚,不敢确定,也未尝试验证

第二次排查,

先从源码入手,从报错方法,排查到对应父组件的写值方法,子组件使用props传递,到此断了

但是由于这里常用context来传值,又使用了 childContextTypes声明了ctx

而该组件的childValue必然是被子组件赋值了,推测会有ctx.childValue相关的子组件赋值调用,搜索,果然有结果

在搜索出的可能文件中,打断点,果然找到对应的写值方法

再从错误栈入手,跟踪到调用栈的写值方法setModalValue,触发写值方法的居然是componentDidMount,这个就有点不好了

应该是setState触发re-render,导致子组件重渲染,既而触发componentDidMount,到这里仍然未能理清数据传递走向

从componentDidMount的该子组件入手,源码排查谁引用了它

1. 直接搜索,失败,文件路径写法不同

2. 使用改名大法,修改文件名,编译报错的文件,就是引用该组件的文件

从报错文件中找出最可能的文件,打断点,或直接分析相关源码,即可较容易得出结果

这里排查出确实是缺少枚举项,导致选择别的选项正常,选择该选项则报错,无枚举项无法得到该子组件了,无法传递,既而无法触发重渲染来写值

 

总结:

1. 重视错误调用栈,从栈上分析必然是对的,遇到找不到源头的栈调用,推测可能出现的调用方式,全局搜索来查找

2. 选项单个出现问题,其他选项正常,多半是因为选项的枚举项不全导致的,大胆尝试,验证成功后再反推