如何解决Shadcn+React Hook Form提交失败时页面重载问题

问题根源 #

你代码里嵌套了两层<form>元素：Shadcn的<Form>组件本身就会渲染为原生<form>标签，你又在它内部额外套了一层原生<form>，这会导致React Hook Form的默认提交拦截逻辑失效。当异步登录请求失败时，浏览器的原生表单提交行为就会触发，直接重载页面。

修复方案 #

移除内层的原生<form>标签，把onSubmit和表单的className直接绑定到Shadcn的<Form>组件上：

修改后的核心代码：

// 移除内层<form>，直接在Shadcn Form上绑定onSubmit和样式
<Form {...form} onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
  <FormField
    control={form.control}
    name="email"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input {...field} type="email" placeholder="m@example.com" />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
  <FormField
    control={form.control}
    name="password"
    render={({ field }) => (
      <FormItem>
        <div className="flex items-center">
          <FormLabel>Contraseña</FormLabel>
          <Link
            href="/forgot-password"
            className="ml-auto inline-block text-sm underline"
          >
            Olvidaste tu contraseña?
          </Link>
        </div>
        <FormControl>
          <Input {...field} type="password" />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
  <Button
    isLoading={form.formState.isSubmitting}
    type="submit"
    className="w-full"
  >
    Iniciar Sesión
  </Button>
</Form>

补充说明 #

1. React Hook Form的handleSubmit会自动调用event.preventDefault()，不需要你手动添加。
2. 额外检查下catchAxiosError函数，如果它内部会重新抛出错误，需要确保在catch块里处理掉，避免异步函数返回reject状态（不过这个场景下主要问题还是双层form）。

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