React Hook Form提交失败后表单item_presupuestario值丢失问题

问题现象 #

• 基于React Select封装了自定义样式的下拉组件，配合React Hook Form的Controller使用
• 表单提交前，选中项显示正常，字段值也能正确获取
• 提交表单触发isSaving状态切换后，item_presupuestario字段值变成了undefined，但组件上仍能看到之前选中的选项
• 一开始用useEffect临时做了值的回显，但总觉得不是根本解决办法

根本原因 #

问题出在Controller组件上设置的disabled={isSaving}属性。当isSaving从false切换为true时，Controller内部的状态管理逻辑会丢失对该字段值的跟踪，导致字段值被重置为undefined。

解决方案 #

把Controller上的disabled属性移除，转而将disabled={isSaving}直接设置到封装的CustomSelect组件上。这样既实现了保存时禁用下拉框的需求，又不会干扰React Hook Form对字段值的维护。

错误写法（导致问题） #

<Controller
  name="item_presupuestario"
  control={control}
  disabled={isSaving} // 这里的disabled导致字段值丢失
  render={({ field }) => (
    <CustomSelect
      {...field}
      options={budgetItems}
      placeholder="选择预算项"
    />
  )}
/>

正确写法（修复后） #

<Controller
  name="item_presupuestario"
  control={control}
  render={({ field }) => (
    <CustomSelect
      {...field}
      disabled={isSaving} // 将disabled移到自定义Select组件上
      options={budgetItems}
      placeholder="选择预算项"
    />
  )}
/>

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