问题背景描述
页面组件使用 antd 的 Select 组件,下拉框的 options 数据是动态获取的,基本就是有value 和 label 属性的对象数组。
提交数据后,我们有一个保存草稿的操作,支持返回或者刷新页面,浏览其他页面之后通过其他入口,比如我的订单,跳转回来完善信息,会通过接口获取之前填写的草稿数据,回显到相应的位置。
主要问题是选择下拉的时候显示的是正常的,然后提交数据之后,从其他页面回来完善信息,回显的时候显示的不是 value 值对应的 label,而是 value 值。
原因
分析原因的话,非常可能的原因就是 回显的value和options的数据源中的 value 类型不一致,导致的映射问题。
解决方法
解决方法分为前端改和后端改两种。
前端改的话就是获取回显接口数据之后处理一下,把相应 value 转换成 options 的数据源中的 value 类型一致的类型。
后端改的话就是改接口,接口返回的需要回显到 Select 组件的字段类型改成 options 的数据源中的 value 属性一致的类型。
总结
本文写了一个解决下拉框数据提交后回显名称不对的问题,通过分析问题,发现时数据类型不一致导致的,也是开发中经常出现的问题了。分别给出了前端和后端的修改方案。