通常，在使用表单时，您需要：
a) 显示加载程序
b) 显示验证错误
这通常意味着管理几个状态变量。但随着 react 19 中引入的新 useactionstate 钩子，现在有一种更简单的方法来处理它。
链接
演示
代码库
react hook：useactionstate
在以下代码片段中，请注意如何使用 useactionstate：
import { useactionstate } from "react";import loader from "@/components/loader";function form() { const [error, submitaction, ispending] = useactionstate( async (previousstate, formdata) => { const error = await updatename(formdata.get("name")); if (error) { return error; } return ""; }, "" ); return ( name: {ispending && } {error && {error}
} );}
有几件事要提一下：
useactionstate 返回三件事：
第一个变量 error 用于表示错误。在本例中，它是一个字符串，但它实际上可以是任何类型。
第二个变量submitaction是触发表单提交的函数。
第三个变量 ispending 是一个布尔值，表示待处理状态。它对于在提交表单时禁用元素或显示微调器很有用。
useactionstate 需要两个参数：
第一个参数是表单提交时submitaction触发的函数。
第二个参数是错误的初始值。在本例中，它是一个空字符串，但您可以使用“填写所有字段”之类的内容来代替。
useactionstate 提供了 formdata，它是 formdata 的一个实例，基本上是一个表示表单中字段的对象。
表单中的输入字段：
可以这样读：
formdata.get("name");
name 是输入字段的名称。
error 将显示来自服务器的任何错误。如果没有，那就是空的。
ispending 会在提交表单时自动由钩子更新为 true，并在收到后端响应后设置回 false。
如果没有错误，useactionstate 还会处理重置表单。
向后端请求
对于这个演示，updatename 函数非常基本，它只是向后端发出 post 请求，传递名称。如果后端返回错误，则该函数返回该错误；否则，它返回一个空字符串，这意味着服务器没有错误。
async function updatename(name) { const response = await fetch("/lambda-function", { method: "post", body: json.stringify({ name }), }); if (!response.ok) { const { message } = await response.json(); return message; } return "";}
后端 post 请求处理程序
我正在使用一个简单的 lambda 函数，它仅检查名称是否是至少包含 2 个字符的字符串。还有 2 秒的延迟，只是为了给 ui 一些时间来显示微调器。
const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms));};const handler = async (event) => { const { name } = JSON.parse(event.body || "{}"); await sleep(2_000); if (name?.length < 2) { return { statusCode: 400, body: JSON.stringify({ message: "Name must be at least 2 characters." }), }; } return { statusCode: 200, };};
结论
react 19 的 useactionstate 钩子在处理表单中应该始终存在的两件事时非常有用：挂起状态和验证错误。该钩子负责更新这些“状态变量”，如果您想比较值，甚至可以提供对 previousstate 的引用。
提交表单并且没有返回错误后会发生什么由应用程序决定。在大多数情况下，这意味着将用户重定向到另一个页面或显示成功消息。
以上就是React 新钩子 useActionState的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499586.html
微信扫一扫 
支付宝扫一扫 
