SuperAPI AI 工具集

react-hook-form-zod

前端与建站

查看项目

更新于 10-16 08:46

技能介绍

用途:在 React 应用中用 React Hook Form v7 与 Zod v4 搭建带类型安全校验的表单,同一份 schema 可同时用于客户端与服务端校验,服务端校验不可省略。

主要能力:zodResolver 连接 Zod 与 React Hook Form 并保留类型安全;支持 register(非受控,性能最佳)与 Controller(第三方组件);支持 refine 跨字段校验、transform 数据转换、useFieldArray 动态列表、异步校验与防抖、多步表单(schema merge + trigger 指定字段)、discriminatedUnion 条件校验,以及 Zod v4.3.0+ 的 exactOptional、xor、fromJSONSchema。

用法要点:安装命令 npm install react-hook-form@7.70.0 zod@4.3.5 @hookform/resolvers@5.2.2。始终设置 defaultValues;用 const form = useForm(...) 并访问 form.control、form.handleSubmit、form.formState 等,不要解构。useFieldArray 的 key 必须用 field.id 而非 index。服务端用 schema.parse(await req.json()) 校验。

限制与已知问题:Zod v4 与 @hookform/resolvers 存在类型兼容问题(#813),可用 import { z } from 'zod/v3' 绕过;.optional() 空字符串触发校验错误(#13102);useFieldArray 不支持原始类型数组(#12570),且 SSR 存在 hydration 不匹配(#12782);300+ 字段同时使用 resolver 与读取 formState 会卡顿约 9.5 秒(#13129);v8 为 beta,存在 field.id→key 等破坏性变更。