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

Question

我有一个带有 select 字段的简单表单，它 react-hook-form for validation and everything. There's a Controller which renders a Material UI Select. I would like to set the value of such select using 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>
      )
    }}
  />
);

就更改 select 的值而言，setValue 的效果非常神奇。当我输入新值时，它会按预期工作。问题（我猜）是组件没有重新渲染，所以旧值仍然显示。我不确定如何解决这个问题，文档也没有太大帮助。非常感谢任何帮助，谢谢！

Answer 1

我想你只是忘了将 <Controller /> 的 value 属性设置为你的 <MuiSelect />。您还必须通过 defaultValue 属性或通过 useForm.

为您的 <Controller /> 字段设置一个 defaultValue

<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>
    )
  }}
/>

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

How to trigger re-render with `setValue` using react-hook-form?

reactjs

forms

select

react-hook-form