react-hook-form调用getValues无法获取子自定义下拉组件的authorId值怎么办

问题根因 #

你的代码存在3个核心错误导致无法读取authorId值：

• Controller 组件错误传入了{...register}，register和Controller是react-hook-form两种不同的表单绑定方案，混用会导致状态关联异常
• 自定义组件CustomDropdown内部仅把选中值存在了组件私有stateselectedValues中，没有调用field.onChange同步到react-hook-form的全局表单状态，因此getValues无法读取到对应值
• CustomDropdown存在语法错误，return语句位置错误，组件无法正常渲染返回内容

修复方案 #

1. 修正父组件Controller用法 #

移除{...register}参数即可，Controller通过name和control即可完成表单状态绑定：

const { control, getValues } = useForm();

<Button
  onClick={() => {
    console.log(getValues());
  }}
>
  Print Values
</Button>

<FormControl variant="outlined">
  <InputLabel>Author</InputLabel>
  <Controller
    control={control}
    name="authorId"
    render={({ field }) => (
      <CustomDropdown category="Author" field={field} />
    )}
  />
</FormControl>

2. 修正CustomDropdown组件逻辑 #

不需要额外维护私有state，直接用field暴露的状态和方法即可，同时修正语法错误：

const CustomDropdown = ({ field }) => {
  return (
    <Select
      {...field}
      value={field.value || ""}
    >
      <MenuItem key="1" value="1">
        Option 1
      </MenuItem>
      <MenuItem key="2" value="2">
        Option 2
      </MenuItem>
    </Select>
  );
};

如果确实有业务需要在组件内部维护私有状态，只要在onChange时同步调用field.onChange即可：

const CustomDropdown = ({ field }) => {
  const [selectedValues, setSelectedValues] = React.useState("");

  return (
    <Select
      {...field}
      value={selectedValues || ""}
      onChange={(e) => {
        const value = e.target.value;
        setSelectedValues(value);
        // 同步值到react-hook-form表单状态
        field.onChange(value);
      }}
    >
      <MenuItem key="1" value="1">
        Option 1
      </MenuItem>
      <MenuItem key="2" value="2">
        Option 2
      </MenuItem>
    </Select>
  );
};

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