Ant Design <Select>结合react-hook-form与值转换时初始值不显示问题

核心问题出在Ant Design Select的默认值匹配机制：

• AntD Select 默认使用严格相等（===）校验表单值与选项值是否匹配，你通过Zod转换生成的初始对象（比如{ value: 'a', label: 'Option A' }），和选项数组里的对象是不同引用，即便结构完全一致，也会匹配失败，导致初始值无法显示。
• 原生<select>的匹配逻辑基于值的字符串内容（原生仅支持字符串/数字类型的value），纯字符串值的AntD Select也是直接比较字符串内容，所以这两种场景都能正常显示初始值。

最直接的修复方式是给AntD Select添加compareWith属性，自定义值的匹配逻辑，通过对象的value字段判断是否相等，而非依赖引用：

<Select
  {...register("selectedOption")}
  options={options}
  compareWith={(a, b) => a?.value === b?.value}
/>

其他可选方案 #

1. 复用选项对象引用：在Zod转换和表单初始化时，直接从选项数组中获取对应对象，而非创建新对象。比如修改Zod转换逻辑：

const optionSchema = z.string().transform((val) => options.find(opt => opt.value === val));

同时表单默认值直接使用options里的对象：

defaultValues: { selectedOption: options[0] }

2. 保持表单值为字符串：如果业务允许，表单值仍存字符串，仅在渲染Select时通过选项映射显示，这种方式可以避开对象引用问题，但会失去Zod转换为对象的便利性。

内容的提问来源于stack exchange，提问作者Erik Hofer