行动
react 应用程序中的一个常见用例是执行数据突变，然后更新状态作为响应。例如，当用户提交表单以更改其姓名时，您将发出 api 请求，然后处理响应。过去，您需要手动处理挂起状态、错误、乐观更新和顺序请求。
例如，您可以在 usestate 中处理挂起和错误状态：
// before actions
function updatename({}) {
const [name, setname] = usestate("");
const [error, seterror] = usestate(null);
const [ispending, setispending] = usestate(false);
const handlesubmit = async () => {
setispending(true);
const error = await updatename(name);
setispending(false);
if (error) {
seterror(error);
return;
}
redirect("/path");
};
return (
setname(event.target.value)} />
{error && {error}
}
);
}
在 react 19 中，我们添加了对在转换中使用异步函数的支持，以自动处理挂起状态、错误、表单和乐观更新。
例如，您可以使用 usetransition 为您处理挂起状态：
// using pending state from actions
function updatename({}) {
const [name, setname] = usestate("");
const [error, seterror] = usestate(null);
const [ispending, starttransition] = usetransition();
const handlesubmit = () => {
starttransition(async () => {
const error = await updatename(name);
if (error) {
seterror(error);
return;
}
redirect("/path");
})
};
return (
setname(event.target.value)} />
{error && {error}
}
);
}
异步转换将立即将 ispending 状态设置为 true，发出异步请求，并在任何转换后将 ispending 切换为 false。这使您可以在数据更改时保持当前 ui 的响应能力和交互性。
笔记
按照惯例，使用异步转换的函数称为“操作”。
操作会自动为您管理提交数据：
挂起状态：操作提供一个挂起状态，该状态在请求开始时启动，并在提交最终状态更新时自动重置。
乐观更新：操作支持新的 useoptimistic 挂钩，因此您可以在提交请求时向用户显示即时反馈。
错误处理：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。
表单：
在下一节中，我们将详细介绍 react 19 中的每个新 action 功能。
新钩子：useactionstate
为了使操作的常见情况更容易，我们添加了一个名为 useactionstate 的新钩子：
const [error, submitaction, ispending] = useactionstate(
async (previousstate, newname) => {
const error = await updatename(newname);
if (error) {
// you can return any result of the action.
// here, we return only the error.
return error;
}
// handle success
return null;
},
null,
);
useactionstate 接受一个函数（“action”），并返回一个包装的 action 来调用。这是有效的，因为动作是组合的。当调用被包装的 action 时，useactionstate 会返回该 action 的最后结果作为数据，并将该 action 的挂起状态作为挂起。
笔记
react.useactionstate 以前在 canary 版本中称为 reactdom.useformstate，但我们已重命名它并弃用了 useformstate。
请参阅#28491 了解更多信息。
有关更多信息，请参阅 useactionstate 的文档。
