阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 07月09日

useActionState — React 中的新 Hook 🎉

開發者您好👋 ，

我是你的朋友Md Taqui Imam ，今天我將解釋 React 中一個令人興奮的新鉤子，稱為useActionState 。

在 Github 上關注我⭐

什麼是 useActionState？

useActionState 是一個新的 React hook，它可以幫助我們根據表單操作的結果更新狀態。

它就像一個聰明的幫手，可以為我們記住一些事情，並且可以在我們提交表單時更改它們。

查看官方文件🚀

重要提示：目前，useActionState 僅在 React 的 Canary 和實驗通道中可用。為了充分利用它，您需要使用支援 React Server 元件的框架。

如何使用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>
  );
}

在此範例中，每次按一下按鈕，計數就會增加一。 useActionState 掛鉤負責在提交表單時更新狀態。