Next.js 14中useFormState与react-hook-form表单处理选型指南

1. 当前 react-hook-form 实现的优化方案 #

针对你现有的登录表单，这里给出关键优化点及优化后的代码：

优化核心点 #

• 移除手动维护的 error/success 状态，改用 react-hook-form 内置的错误管理机制，减少状态冗余
• 用 useFormStatus 替代 startTransition，更直观处理提交 pending 状态
• 简化异步提交逻辑，用 async/await 替代链式调用，提升可读性
• 统一服务端错误的映射方式，支持字段级或全局错误提示

优化后的代码 #

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { CardWrapper } from "./card-wrapper"
import { LoginSchema } from "@/schemas"
import { login } from "@/actions/login"
import { useFormStatus } from "react-dom"

// 封装提交按钮，自动获取表单提交状态
function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <Button className="w-full" type="submit" disabled={pending}>
      {pending ? "提交中..." : "提交"}
    </Button>
  )
}

export function LoginForm() {
    const form = useForm<z.infer<typeof LoginSchema>>({
        resolver: zodResolver(LoginSchema),
        defaultValues: {
            email: "",
            password: ""
        },
    })

    const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
        try {
            const data = await login(values)
            if (data?.error) {
                // 根据服务端返回的错误类型，选择字段级或全局错误提示
                // 示例：如果是邮箱不存在，映射到email字段
                // form.setError("email", { message: data.error })
                // 全局错误（如登录失败）则设置到root
                form.setError("root", { message: data.error })
            } else if (data?.success) {
                // 登录成功后重置表单，可结合路由跳转等逻辑
                form.reset()
            }
        } catch (err) {
            form.setError("root", { message: "服务器错误，请稍后重试" })
        }
    }

    return (
        <CardWrapper
            headerLabel="Welcome back 🥳"
            backButtonLabel="Don't have an account?"
            backButtonHref="/auth/register"
            showSocial
        >
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input placeholder="email" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>密码</FormLabel>
                                <FormControl>
                                    <Input type="password" placeholder="password" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <SubmitButton />
                    {/* 显示全局错误提示 */}
                    {form.formState.errors.root && (
                        <p className="text-red-500 text-sm mt-2">{form.formState.errors.root.message}</p>
                    )}
                </form>
            </Form>
        </CardWrapper>
    )
}   

2. Next.js 场景下 useFormState 与 react-hook-form 的核心差异 #

3. 二者分别适用的场景 #

react-hook-form 适用场景 #

• 包含多字段、复杂逻辑的表单（如用户注册、个人信息编辑表单）
• 需要客户端实时验证（如输入时即时提示格式错误、密码强度检测）
• 表单需要动态交互（如根据用户选择添加/移除字段、条件渲染表单区域）
• 对表单性能有要求（非受控组件减少不必要的重渲染）
• 项目已采用react-hook-form，希望保持技术栈统一

useFormState 适用场景 #

• 字段较少的简单表单（如登录、搜索、单字段反馈提交）
• 依赖服务端验证或服务端返回状态的表单（如提交后需展示服务端返回的特定错误）
• 希望尽量减少第三方依赖，优先使用React官方生态的场景
• Next.js项目中，优先采用服务端Action处理表单逻辑，追求服务端驱动的简洁性

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