需求背景
有一个表格,点击表格每一行的一个叫"查看数据记录"的按钮,打开一个抽屉,会调后端一个接口(这里我们叫它接口A),其中一个参数是抽屉里下拉框选中的当前id(就是下文中的pid)
问题描述
表格每一行红框圈出来的这个按钮(图1),点击后会弹出一个抽屉(图2),抽屉里面有一个下拉框, 需求要求每次打开都默认选中"主版本", 遇到的问题是: 打开表格第二行的抽屉,此时改变下拉框使其选中"分支一", 然后再去打开表格第三行的抽屉,下拉框选中的id是"主版本"的id,但是显示的依然是 "分支一"的名字!
图(1)
图(2)
--------------------------------分割线--------------------------------
原因分析
前提
这里组件都是类组件写的,抽屉中的select组件绑定的defaultValue叫pid(下面就直接说pid了),抽屉组件里用了componentWillReceiveProps和componentDidMount两个生命周期,接口A在这两个生命周期都有调用, 我在这两个钩子里发现我每次拿到的pid都是对的,但是切换某一个抽屉的下拉框,再打开别的抽屉,下拉框显示的名字永远是上次下拉框选择的名字(但pid是对的)
当时想到的原因如下
1) : 一开始觉得是抽屉关闭的时候我没有重新更新defaultValue绑定的值,于是关闭抽屉的时候手动更新了一下,但是并没有如愿解决我的问题
2): 由于此时我的pid是声明在state里的数据,我的pid在这两个钩子里都做了setState为"主版本"的id,更新pid的过程大概就是:
- 1.第一次打开表格第二行的抽屉时, 在componentDidMount 更新pid为"主版本"的id, 当我切换下拉框为分支一时, 就setState pid为"分支一""的pid,
- 2.基于第一条的操作, 此时当我再打开表格第三行的抽屉时, 只会执行componentWillReceiveProps, 在这个钩子, 由于我也setState为"主版本"的id, 所以render里我拿到的pid不是"分支一"id, 而是我们想要的主版本的id, render里拿到的id也确实是"主版本"的id, 但是显示的还是"分支一"
- 3.基于以上两条的操作, 在网上找了一下答案, 看到使用componentWillReceiveProps,props改变时组件才会重新渲染, state里的数据改变并不会使子组件刷新, (不过我对这个说法有点怀疑,因为render里拿到的数据已经是更新后的"主版本"的id了), 于是我把pid抽出来,写在了抽屉的父组件里,由父组件传过来, 再在这两个钩子里更新父组件里的pid
没出意外,依然没有解决问题!!!
3): 既然不行,那我就只能继续找原因了,由于之前遇到过一个类似问题:
- 给一个表单设置了initValue,但是当initValue绑定的值变化时,我的表单显示的值并没有更新,有人跟我说使用initValue的时候,数据更新不会更新页面,让我用setFieldsValue,由于之前用setFieldsValue也确实解决了表单值没更新的问题,那我就不偷懒了,试试改成表单用setFieldsValue吧!
结果又没出意外,问题依然没解决!!!
4): 实在找不到原因了,心态崩了呀! 不找了,就这样放了一周,当然期间没有闲着,而是去写别的任务改别的bug了,每天都想起来这个没解决的bug,睡前都要想一下到底为什么呢?明明拿到了正确的id,为什么名字不对呢..............
解决方案
一周过去了,今天本来该提测 ,结果后端那里有bug,没有提测,那我就再找找原因吧,在交给测试测之前尽量解决掉这个问题,结果一行代码解决了困扰了我一周的问题!
就是加了这个key,就这样解决了我的问题~~~~~~~~~~~~
tip:
总结
或许这个问题很简单,但是解决这个问题的那一刻,真的很激动! 写这个文章只是为了记录一下这个让我印象深刻的问题,同样给踩到同样坑的工友一个参考! 或许我很菜,但我在学了,如果有说的不够详细或者不对的地方,希望大佬们给我补充更正,先谢为敬!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。