React 19 useFormStatus/useFormState 渐进式表单与 Server Actions 协同实践

useFormStatus/useFormState 渐进式表单与 Server Actions概述`useFormStatus` 在表单提交期间提供 `pending` 等状态；`useFormState` 提供服务端返回的结果/错误，结合 Server Actions 简化表单处理与用户反馈。表单与 Server Actions'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {

const { pending } = useFormStatus()

return <button type="submit" disabled={pending}>{pending ? '提交中…' : '提交'}</button>

}

export default function Form() {

return (

<form action={saveAction}>

<input name="email" type="email" required />

<SubmitButton />

</form>

)

}

'use server'

import { z } from 'zod'

import { revalidateTag } from 'next/cache'

const schema = z.object({ email: z.string().email() })

export async function saveAction(formData: FormData) {

const data = Object.fromEntries(formData)

const parsed = schema.safeParse(data)

if (!parsed.success) return { ok: false, errors: parsed.error.flatten() }

await db.user.upsert(parsed.data)

revalidateTag('users')

return { ok: true }

}

useFormState 错误反馈（示意）'use client'

import { useFormState } from 'react-dom'

export function EnhancedForm() {

const [state, action] = useFormState(saveAction, { ok: true })

return (

<form action={action}>

<input name="email" type="email" />

{state?.errors && <div className="error">邮箱格式不正确</div>}

<button type="submit">提交</button>

</form>

)

}

技术参数与验证表单交互响应性良好；错误反馈即时；标签失效与数据一致性正常。注意事项组件层级需满足 Hooks 的表单上下文；与幂等/回滚策略协同。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0