如何使用react-hook-form通过`setValue`触发重新渲染？

Question

我有一个带有选择字段的简单表单，它是用于验证和所有内容的react-hook-form 。有一个Controller呈现 Material UI Select。我想从组件外部（在所有控件所在的表单根目录中）使用setValue设置此类选择的值。
这是我正在使用的代码（稍微简化，以免浪费太多时间）

type Props = {
  name: string;
  control: Control<any>;
  options: SelectOptions[];
};
const Select: FunctionComponent<Props> = ({
  name,
  control,
  options,
}) => (
  <Controller
    control={control}
    name={name}
    render={({ field: { onChange, value } }) => {
      return (
        <FormControl>
          <MuiSelect onChange={onChange}>
            {options.map((o) => (
              <MuiSelectItem key={o.key} value={o.value}>{o.label}</MuiSelectItem>
            ))}
          </MuiSelect>
        </FormControl>
      )
    }}
  />
);

至于改变选择的值，setValue效果很神奇。当我提供一个新值时，它会按预期工作。问题（我猜）是组件没有重新渲染，所以旧值仍然显示。我不知道如何解决这个问题，文档也没有多大帮助。非常感谢任何帮助，谢谢！

Answer 1

正如@knoefel所说，我尝试设置defaultValue=""但对我不起作用（也许是因为我正在使用FormProvider）。所以我所做的是使用watch而不是value

<Controller
  name='name'
  control={control}
  render={({ field: { onChange } }) => (
    <Select
      dropdownValues={dropdownValues}
      value={watch('name')}
      onChange={onChange}
    />
  )}
/>

Answer 2

value我想你只是忘了将 的属性设置<Controller />为你的<MuiSelect />. 您还必须通过prop 或 viadefaultValue为您的字段设置 a 。<Controller />defaultValueuseForm

<Controller
  control={control}
  name={name}
  defaultValue=""
  render={({ field: { onChange, value } }) => {
    return (
      <FormControl>
        <MuiSelect onChange={onChange} value={value}>
          {options.map((o) => (
            <MuiSelectItem key={o.key} value={o.value}>{o.label}</MuiSelectItem>
          ))}
        </MuiSelect>
      </FormControl>
    )
  }}
/>