react-hook-form Controller导致表单提交出现额外条目问题求助

核心原因 #

你的问题本质是Controller的字段绑定和嵌套组件内部的表单元素name属性冲突，加上Controller的value/onChange未正确传递，导致react-hook-form同时收集了两个字段：一个是Controller绑定的正确ID但未正确赋值，另一个是组件内部用label当name的字段。

具体修复步骤 #

1. 严格设置Controller的name属性
   确保Controller的name参数是你期望的字段ID（比如示例中的"6"），绝对不要把label值传给name。动态生成时直接用JSON里的字段ID即可：

   <Controller
     name={id} // 这里id就是JSON里的目标字段ID，如"6"
     control={control}
     // 其他配置项
   />
   

2. 移除嵌套组件内部的name属性
   自定义表单组件内部的input/select等元素，不要手动设置name属性——Controller已经通过name接管了字段的绑定，组件自己加name会让react-hook-form额外收集一个以该name为键的字段，这就是你看到label值作为键的原因。

3. 正确传递Controller的field属性
   在Controller的render函数里，把field对象的value和onChange直接传给你的组件，无需额外调用setValue（除非有特殊自定义逻辑）：

   <Controller
     name={id}
     control={control}
     render={({ field }) => (
       <CustomQuestionComponent
         value={field.value}
         onChange={field.onChange}
         label={label} // label仅做显示用途
       />
     )}
   />
   

为什么临时方案能生效？ #

你用setValue(${id}, itemValue)其实是手动给正确ID的字段赋值，但这相当于绕开了Controller的正常绑定逻辑，属于治标不治本。修复上面三个点后，Controller就能正常工作，不需要额外调用setValue。

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