React-hook-form: 无法成功实现 MUI Select 组件

Question

我正在尝试围绕 MUI Select 组件创建一个包装器，虽然我发现了一些似乎非常接近工作的解决方案。他们就是不这样做，我不确定为什么。

我附上了错误图片和相关代码。有什么办法解决这个问题吗？

错误信息

我的控制器

<FormControl>
  <Controller
    name="sourceLanguage"
    rules={{ required: 'this is required' }}
    control={control}
    defaultValue={sourceLanguage}
    as={
      <Select>
        <MenuItem value="">None</MenuItem>
        <MenuItem value="fr">French</MenuItem>
        <MenuItem value="es">Spanish</MenuItem>
      </Select>
    }
  />
</FormControl>

useForm挂钩

  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<dynamicFormState>({});

相关状态

export interface dynamicFormState {
  title: string;
  description: string;
  contentId: string;
  sourceURL: string;
  sourceLanguage: string;
  targetLanguage: string;
  author?: IYoutubeAuthor;
  content?: IYoutubeContent;
}

Answer 1

您似乎在混用 RHF 的 v6 和 v7。您的 <Controller /> 组件使用带有 as 属性的 v6 语法，而您可能在项目中使用 v7 作为依赖项（因此 TS 错误指出 as 不是属性的 <Controller />)。使用 render 道具而不是 as 编写您的 <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>

React-hook-form: 无法成功实现 MUI Select 组件

React-hook-form: unable to successfully implement MUI Select component

javascript

typescript

reactjs

react-hook-form

错误信息

我的控制器

useForm挂钩

相关状态