react-hook-form中Controller结合setValue不更新UI问题求助

你遇到的问题是：用Controller包裹MUI的TextField（select模式）后，调用setValue能成功设置表单值，但UI上没有选中对应的选项。

核心原因 #

React Hook Form的Controller需要明确的初始值来同步表单状态与UI。如果缺少初始值，即便setValue更新了表单状态，UI组件也无法正确触发重渲染同步选中状态。

解决方案 #

方案1：通过useForm的defaultValues初始化（推荐）

直接在useForm中设置默认值，无需额外使用useEffect调用setValue：

const { register, control, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    category: 10 // 直接设置初始选中值
  }
});

<Controller
  name="category"
  control={control}
  render={({ field }) => (
    <TextField
      {...field}
      select
      label={'Item Category'}
    >
      <MenuItem value={''} disabled>Select Category</MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </TextField>
  )}
/>

方案2：保留useEffect+setValue，补充defaultValue

如果必须通过setValue动态设置初始值，需要给Controller添加defaultValue，并在setValue时指定触发更新的参数：

const { register, control, handleSubmit, setValue, formState: { errors } } = useForm();

useEffect(() => {
  // 添加shouldDirty参数确保触发UI同步
  setValue('category', 10, { shouldDirty: true });
}, [setValue]);

<Controller
  name="category"
  control={control}
  defaultValue="" // 必须设置defaultValue，哪怕是空值
  render={({ field }) => (
    <TextField
      {...field}
      select
      label={'Item Category'}
    >
      <MenuItem value={''} disabled>Select Category</MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </TextField>
  )}
/>

额外注意事项 #

• 确保MenuItem的value类型与设置的初始值类型完全一致（比如这里是数字10，不要写成字符串'10'），否则会出现值匹配失败的情况。
• {...field}已经包含了value和onChange，无需额外手动绑定，但如果遇到特殊情况，可以明确指定value={field.value}来确保同步。

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