React Hook Form结合React-Select多选时表单无法提交选中值求助

你的问题核心是没有把React Select的选中值同步给React Hook Form的表单状态——你自己用useState维护了selectedTopic，但完全没调用Controller提供的onChange方法，所以表单根本感知不到选中状态，提交时自然是空值。

具体修改步骤 #

1. 移除多余的useState：React Hook Form的Controller已经内置了状态管理，不需要额外维护本地状态。
2. 同步选中值到表单：在选择变更时，必须调用Controller传入的onChange方法，把选中的选项数组传递进去。
3. 修正类型匹配：确保回调参数类型和ITopic一致，避免TypeScript报错。

修正后的完整代码 #

interface ITopic {
  value: string;
  label: string;
}

const topicOptions: ITopic[] = [
    { value: 'javascript', label: 'JAVASCRIPT' },
    { value: 'php', label: 'PHP' },
    { value: 'python', label: 'PYTHON' },
    { value: 'java', label:'JAVA' },
    { value: 'C#', label: 'C#' }
]

<Controller
   control={control}
   // 多选模式下初始化值设为空数组
   defaultValue={[]}
   render={({ field: { onChange, value, name, ref } }) => {
   // 修正参数类型为ITopic数组
   const handleSelectionChange = (selectedOptions: readonly ITopic[]) => {
      // 同步选中值到React Hook Form表单状态
      onChange(selectedOptions);
      // 直接用selectedOptions打印最新值（useState更新是异步的，原写法拿不到实时值）
      console.log(selectedOptions);
   }
   return (
      <Select
        isMulti
        name={name}
        // 直接使用Controller提供的value
        value={value}
        options={topicOptions} 
        onChange={handleSelectionChange}
        // 传递ref保证表单校验等功能正常
        ref={ref}
      />
   )}}
  name="topics"
/>   

额外说明 #

• 提交表单时，topics字段会直接返回选中的ITopic数组（例如[{value: 'javascript', label: 'JAVASCRIPT'}, ...]）。
• 如果只需要选中项的value字符串数组（比如['javascript', 'php']），可以给Controller添加valueAs属性做转换：

  <Controller
    // ...其他属性
    valueAs={(options) => options.map(opt => opt.value)}
  />
  

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