Shadcn 表单类型错误：无法解构“useFormContext(...)”的属性“getFieldState”

Question

我在我的应用程序中使用 Shadcn Form 组件。我有一个简单的形式和模式：

const formSchema = z.object({
    username: z.string(),
  })

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    username: "",
  },
});

这是我的 HTML 表单：

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
    <FormField
      control={form.control}
      name="username"
      render={({ field }) => (
        <FormItem>
          <FormLabel>User Name</FormLabel>
          <FormControl>
            <Input {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>         

但是，当我在申请中打开此表格时，我收到以下错误：

未捕获类型错误：无法解构“useFormContext(...)”的属性“getFieldState”，因为它为空。

如何修复此错误？

Answer 1

发生此错误是因为我从 react-hook-form 导入

Form

，而不是从 shadcn import

@/components/ui/form

导入。更正导入修复了错误