react嵌套多层问题排查

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

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

第二次排查，

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

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

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

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

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

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

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

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

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

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

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

 

总结：

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

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