useActionState — React 中的新 Hook 🎉

你好，开发者👋，

我是你们的朋友Md Taqui Imam，今天我将解释 React 中一个叫做useActionState的新的令人兴奋的钩子。

在 Github 上关注我⭐

什么是 useActionState？

useActionState 是一个新的 React 钩子，它可以帮助我们根据表单操作的结果更新状态。

它就像一个智能助手，可以帮我们记住事情，并在我们提交表单时更改它们。

查看官方文档🚀

重要提示：目前，useActionState 仅在 React 的 Canary 和实验版本中可用。为了充分利用它，你需要使用支持 React 服务器组件的框架。

如何使用 useActionState？

要使用这个钩子，我们首先需要从 React 导入它：

从'react'导入{useActionState};
然后，我们可以像这样在我们的组件中使用它：



const [state, formAction, isPending] = useActionState(actionFunction, initialState);

每个部分的含义如下：

'state'是我们当前的表单状态
'formAction'是我们将在表单中使用的新操作
'actionFunction'是提交表单时运行的函数
'initialState'是我们状态的起始值

何时使用 useActionState：

当您想要根据表单提交更新状态时，请使用此钩子，特别是当您使用服务器组件并希望获得更快的响应时。

例子：

让我们使用 useActionState 制作一个简单的计数器表单：



import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm() {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}