React 19 useFormStatus-useFormState 与 Server Actions 表单协同实践

概览useFormStatus 提供当前提交状态，useFormState 能以 Server Actions 为后端整合表单逻辑。两者配合可实现无刷新提交与状态回传，并在 SSR/CSR 下保持一致的行为与可访问性。Server Actions 与表单app/actions.ts'use server' export async function submit(data: FormData) { const email = String(data.get('email') || '') await new Promise((r) => setTimeout(r, 600)) const ok = /@/.test(email) return { ok } } 客户端组件'use client' import { useFormStatus, useFormState } from 'react-dom' import { submit } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return <button disabled={pending}>{pending ? '提交中…' : '提交'}</button> } export default function Form() { const [state, action] = useFormState(async (_prev, formData) => { 'use server' return submit(formData) }, { ok: false }) return ( <form action={action} aria-describedby="status"> <label htmlFor="email">邮箱</label> <input id="email" name="email" type="email" required /> <SubmitButton /> <p id="status" role="status">{state.ok ? '已提交' : '请输入邮箱'}</p> </form> ) } 治理要点将状态提示用 `role="status"` 输出，保障读屏器反馈。使用 `disabled` 与退避策略避免重复提交与竞态。与缓存标签或路径失效协作，在成功后触发局部刷新。验证与指标React：19.0+；Next.js：15.0+；Node.js：20.x无刷新提交成功率稳定；在弱网下提交反馈延迟 < 1s