useActionState 与 useFormStatus

useActionState(action, initialState) 是 React 19 中的一个钩子，它包装服务器操作，以跟踪其在多次提交之间的状态。它接收操作函数和初始状态值，并返回一个可用于驱动完整表单体验的元组。

该钩子返回 [state, formAction, isPending]。state 保存操作最近一次的返回值（初始值为 null 或您提供的初始值）。formAction 是应传递给表单的包装后操作。操作在服务器上执行期间，isPending 的值为 true。

每次提交表单时，服务器操作都会运行，其返回值会成为新的 state。首次渲染时，state 等于 initialState。这样一来，您可以根据是否有过之前的提交以及这些提交返回的内容，轻松显示不同的界面。

如果服务器操作返回 { errors: { email: 'Invalid email' } }，您可以内联显示错误：{state.errors?.email && <p>{state.errors.email}</p>}。由于状态会在重新渲染之间保持不变，错误消息会一直显示，直到下一次成功提交替换该状态。

当操作返回 { success: true } 时，组件可以渲染成功消息：{state?.success && <p>Form submitted!</p>}。您可以根据状态值有条件地隐藏表单，或用成功消息替代表单。

useFormStatus() 是一个读取最近祖先 <form> 元素待处理状态的钩子。它会返回一个包含 { pending: boolean } 的对象。此钩子必须在表单的子组件中使用，而不能在渲染表单本身的组件中使用。

之所以规定必须在表单内部使用 useFormStatus，是因为该钩子会从其上方的 React 树中读取表单上下文。如果在渲染表单的同一个组件中调用它，那么它将是表单的兄弟节点，而不是后代节点，因此无法访问表单的状态。

标准模式是将提交按钮提取为独立组件：function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }。然后将此组件放置在表单内部，使其能够访问表单的待处理状态。

在提交按钮上设置 disabled={pending} 可以防止重复提交。当用户点击提交且服务器操作正在执行时，pending 为 true，按钮会被禁用且无法点击。操作完成后，pending 恢复为 false，按钮重新启用。

完整的表单用户体验模式会组合使用两个钩子：表单组件中的 useActionState 跟踪操作结果并提供 formAction，而子组件 SubmitButton 内的 useFormStatus 跟踪待处理状态。两者结合后，可以提供验证错误显示和响应迅速的提交按钮。

若要获得更加灵敏的体验，可以将 useOptimistic 与 useActionState 配合使用。您可以在服务器响应之前立即使用预期结果更新界面，然后在实际响应到达时进行协调。这种模式常用于点赞按钮、待办事项列表和其他需要快速反馈的交互。

必须在哪里调用 useFormStatus 才能使其正常工作？

useActionState(action, initialState) 返回 [state, formAction, isPending]，用于跟踪服务器操作的结果。状态保存操作的返回值，因此可以显示内联错误和成功消息。useFormStatus() 在表单的子组件中提供 { pending }，从而支持响应迅速的提交按钮。两个钩子结合使用，可以构建完整且易于访问的表单体验。