解决下拉框数据提交后回显名称不对

问题背景描述

页面组件使用 antd 的 Select 组件，下拉框的 options 数据是动态获取的，基本就是有value 和 label 属性的对象数组。

提交数据后，我们有一个保存草稿的操作，支持返回或者刷新页面，浏览其他页面之后通过其他入口，比如我的订单，跳转回来完善信息，会通过接口获取之前填写的草稿数据，回显到相应的位置。

主要问题是选择下拉的时候显示的是正常的，然后提交数据之后，从其他页面回来完善信息，回显的时候显示的不是 value 值对应的 label,而是 value 值。

原因

分析原因的话，非常可能的原因就是 回显的value和options的数据源中的 value 类型不一致，导致的映射问题。

解决方法

解决方法分为前端改和后端改两种。

前端改的话就是获取回显接口数据之后处理一下，把相应 value 转换成 options 的数据源中的 value 类型一致的类型。

后端改的话就是改接口，接口返回的需要回显到 Select 组件的字段类型改成 options 的数据源中的 value 属性一致的类型。

总结

本文写了一个解决下拉框数据提交后回显名称不对的问题，通过分析问题，发现时数据类型不一致导致的，也是开发中经常出现的问题了。分别给出了前端和后端的修改方案。