如何使用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 ＆lt; controller/＆gt; prop to ＆lt; muiselect/＆gt;。您还必须通过defaultValue prop prop或通过useform < /代码>。

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

Answer 3

这是我的代码库中的一个片段。就我而言，我只是向 MUI 的 value prop 添加了一个三元运算符。我之前的代码 value={value} 变成了 value={value ? value : ""} 并且足以强制 MUI 在每次 value 更改时重新渲染。我不完全确定为什么会这样，但如果有人知道，我很乐意受到启发。

 <Controller
      control={props.control}
      name={props.name}
      render={({ field: { onChange, value } }) => {
        return (
          <TextField
            size="small"
            fullWidth
            value={value ? value : ""}
            type="text"
            label={props.label}
            {...props.register(props.name)}
            onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
              onChange(e);
              if (props.onAfterChange) {
                props.onAfterChange(e);
              }
            }}
          />
        );
      }}
    />

希望这有帮助！