如何在 Next.js 15 和 React 19 中使用服务器操作和 useActionState 钩子添加加载状态

使用新的 useActionState 钩子，管理表单加载状态变得更加简单。

useActionState 钩子可以根据表单操作更新状态，适用于服务器操作或 onSubmit 函数。

该钩子在 React 的 Canary 版本中可用，无需额外安装。

创建登录表单时，可以显示加载状态并处理输入重置问题。

服务器操作是仅在服务器上运行的函数，可以访问数据库和文件系统等资源。

login 操作需要两个参数：prevState 和 formData。

使用 formData.get 方法获取所有表单字段值，验证输入是否为空。

使用 useActionState 钩子显示加载状态，返回三个值：state、formAction 和 isPending。

在表单提交时禁用按钮并显示加载指示器，根据状态显示错误或成功消息。