目录需求背景问题描述原因分析前提当时想到的原因如下解决方案总结需求背景 有一个表格,点击表格每一行的一个叫"查看数据记录"的按钮,打开一个抽屉,会调后端一个接口(
有一个表格,点击表格每一行的一个叫"查看数据记录"的按钮,打开一个抽屉,会调后端一个接口(这里我们叫它接口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的过程大概就是:
没出意外,依然没有解决问题!!!
3): 既然不行,那我就只能继续找原因了,由于之前遇到过一个类似问题:
结果又没出意外,问题依然没解决!!!
4): 实在找不到原因了,心态崩了呀! 不找了,就这样放了一周,当然期间没有闲着,而是去写别的任务改别的bug了,每天都想起来这个没解决的bug,睡前都要想一下到底为什么呢?明明拿到了正确的id,为什么名字不对呢..............
一周过去了,今天本来该提测 ,结果后端那里有bug,没有提测,那我就再找找原因吧,在交给测试测之前尽量解决掉这个问题,结果一行代码解决了困扰了我一周的问题!
就是加了这个key,就这样解决了我的问题~~~~~~~~~~~~
tip:
或许这个问题很简单,但是解决这个问题的那一刻,真的很激动! 写这个文章只是为了记录一下这个让我印象深刻的问题,同样给踩到同样坑的工友一个参考! 或许我很菜,但我在学了,如果有说的不够详细或者不对的地方,希望大佬们给我补充更正,先谢为敬!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: antd-react使用Select组件defaultValue踩的坑及解决
本文链接: https://www.lsjlt.com/news/213920.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0