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