react-hook-form搭配react-select设置默认值后未修改无法提交表单问题

问题根源 #

你遇到的问题是两个原因共同导致的：

• react-select 单选模式下需要接收单个选项对象作为value属性值，你当前用filter筛选返回的是数组，格式不匹配，导致初始状态渲染的选中值和react-hook-form管理的表单字段值不同步
• 你只在onChange触发时调用setValue给productType字段赋值，页面初始化加载时没有给react-hook-form的productType字段设置初始值，如果你给这个字段加了必填校验，初始状态下字段值为空自然无法通过校验，修改选项后调用了setValue赋值，校验通过就可以正常提交

修复方案 #

1. 首先在useForm初始化时配置defaultValues，给productType设置初始值，不要单独在Select组件上维护value状态
2. 把filter改成find获取单个选项对象，匹配react-select的value格式要求
3. 也可以直接用react-hook-form提供的Controller组件绑定react-select，减少手动同步状态的冗余代码

修正后的代码示例

// 第一步：useForm初始化时加defaultValues
const { register, handleSubmit, setValue, control } = useForm({
  defaultValues: {
    // 其他字段默认值...
    productType: cate?._id || undefined
  }
})

// Select组件修正
<Select
  options={typeOptions}
  getOptionValue={(option) => option.value}
  onChange={(option) => {
    setValue("productType", option.value);
  }}
  value={
    // 用find返回单个对象，不是filter返回数组
    typeOptions?.find((option) => option.value === cate?._id) || null
  }
  placeholder="Select Type..."
/>

更规范的Controller绑定写法：

<Controller
  control={control}
  name="productType"
  render={({ field }) => (
    <Select
      {...field}
      options={typeOptions}
      getOptionValue={(option) => option.value}
      onChange={(option) => field.onChange(option.value)}
      value={typeOptions?.find(opt => opt.value === field.value) || null}
      placeholder="Select Type..."
    />
  )}
/>

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