DEV Community
·
如何在 Next.js 15 和 React 19 中使用服务器操作和 useActionState 钩子添加加载状态
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
使用新的 useActionState 钩子，管理表单加载状态变得更加简单。该钩子可以根据表单操作更新状态，适用于服务器操作或 onSubmit 函数。通过创建登录表单，可以显示加载状态并处理输入重置问题。该钩子在 React 的 Canary 版本中可用，只需传入操作函数和初始状态对象。
🎯
关键要点
- 使用新的 useActionState 钩子，管理表单加载状态变得更加简单。
- useActionState 钩子可以根据表单操作更新状态，适用于服务器操作或 onSubmit 函数。
- 该钩子在 React 的 Canary 版本中可用，无需额外安装。
- 创建登录表单时，可以显示加载状态并处理输入重置问题。
- 服务器操作是仅在服务器上运行的函数，可以访问数据库和文件系统等资源。
- login 操作需要两个参数：prevState 和 formData。
- 使用 formData.get 方法获取所有表单字段值，验证输入是否为空。
- 使用 useActionState 钩子显示加载状态，返回三个值：state、formAction 和 isPending。
- 在表单提交时禁用按钮并显示加载指示器，根据状态显示错误或成功消息。
➡️
