从bug角度分析rc-field-form

2022-01-26 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

这是一个线上的bug，原因是上线后有公共组件改动引起的。在bug反馈到我这里之后我的第一反应是找到对应的组件库组件将代码回退到上一次改动前，然后将问题移交给指定的人修改。后被告知修改后无法再满足之前的逻辑，需要我修改业务代码。那修改后，在代码审查阶段又被打回...

$\bullet$ bug重新

该问题被发现是因为匡红的地方在选中值后没有被正确回显，我找到组件后发现组件被之前的input组件修改成了div标签。我的第一反应是div没有被value属性，故无法被form收集。后对应人告知组件库修改影响范围大所以在我本地业务逻辑做了修改

$\bullet$ 第一版修改

$\ast$ 使用useState保存值

$\ast$ 在onChange回调中设置值

$\ast$ 在点击确认按钮后，先将本地存储的值设置给form表单，然后利用setTimeout做延迟提交

$\bullet$ 问题

后代码审查阶段被指出不能这么用，然后再经过一番排查后发现，他不仅修改了组件，还把我业务代码给改了

于是我把外层的div去掉，再次尝试，我擦！！！！竟然可以

$\bullet$ 思考

为什么把div去掉了就可以了？

为什么不去div时，代码回退到input时也是可以的呢？

$\bullet$ 为什么把div去掉了就可以了？

经过将近一上午去断点form组件中filed组件的逻辑，我发现filed组件会被默认添加onChange事件和value属性，而在该回调内部不仅回调了业务层的onChange，同时在内部做了依赖派发更新，form在初始渲染阶段会将所有的filed收集起来，当值更新后会遍历每一个field做forceUpdate强制更新同时将新的值做保存。这样就会把新的value值传递下去，业务层拿到新的value做回显处理。加了div之后，在div上绑定的onChange无法被触发，也就谈不上更新了

$\bullet$ 为什么不去div时，代码回退到input时也是可以的呢？

这就要说组件开发者有点不地道了，他直接在组件内部强制设置了value属性

但是其实在点击确定按钮时是取不到值得，想也是，都没被form收集到，还获取个鬼哟

从bug角度分析rc-field-form

猜你喜欢

热点阅读