React-hook-form无法成功实现MUI Select组件问题求助

解决方案 #

• 核心问题是react-hook-form v7及以上版本已废弃Controller组件的as属性，改用render属性渲染自定义输入组件，原代码属性传递方式不匹配导致运行报错。
• 修正后的Controller实现代码如下：

<FormControl>
  <Controller
    name="sourceLanguage"
    rules={{ required: 'this is required' }}
    control={control}
    defaultValue={sourceLanguage ?? ""}
    render={({ field }) => (
      <Select {...field}>
        <MenuItem value="">None</MenuItem>
        <MenuItem value="fr">French</MenuItem>
        <MenuItem value="es">Spanish</MenuItem>
      </Select>
    )}
  />
</FormControl>

• 注意事项：
  1. 确保defaultValue和其中一个MenuItem的value严格匹配，如果初始sourceLanguage为undefined，兜底为空字符串和None选项的value对应，避免出现非受控组件转受控组件的警告。
  2. render回调返回的Select组件必须绑定传入的field参数，该参数包含react-hook-form运行所需的onChange、value、name等核心属性，绑定后才能实现表单状态和Select组件的同步。

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