React 19 useActionState 表单与状态机协同实践

useActionState 表单与状态机协同实践概述`useActionState` 将动作与状态联结，简化服务端返回处理与前端状态机，实现更清晰的表单交互流程。基本用法'use client'

import { useActionState } from 'react'

function reducer(prev: any, next: any) { return next }

export default function Form() {

const [state, formAction] = useActionState(reducer, { ok: true })

return (

<form action={formAction as any}>

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

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

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

</form>

)

}

Server Actions 协同'use server'

import { z } from 'zod'

export async function formAction(prev: any, formData: FormData) {

const parsed = z.object({ email: z.string().email() }).safeParse(Object.fromEntries(formData))

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

await db.user.upsert(parsed.data)

return { ok: true }

}

状态机策略状态：idle→pending→success/failed；失败提供重试与错误定位；成功清理输入或提示。技术参数与验证表单反馈及时；错误定位清晰；交互可回退与重试可用。注意事项与 `useFormStatus/useFormState` 区分使用场景；避免复杂 reducer 引入额外心智负担。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0