React 19：處理表單的新工具

本文介紹了開發人員在處理表單時常見的困境，以及 React 19 如何終於引入了一些期待已久的工具，使表單處理更加簡潔、更具聲明性，並且大大降低了出錯的可能性。

在前端開發的過去六年中——從構建複雜的表單系統到在 SDG 整合 AI 工具——我編寫、除錯和重構的表單代碼比我願意承認的還要多。

如果你曾經在 React 中構建或維護過表單，你可能也有同感。它們看似簡單...直到它們變得不再簡單。

在本文中，我將帶你了解開發人員在處理表單時面臨的常見困境——以及React 19如何終於引入了一些期待已久的工具，使表單處理更加簡潔、更具聲明性，並且大大降低了出錯的可能性。✨

表單處理的常見挑戰

🔍 讓我們從每個 React 開發者至少遇到過一次的痛點開始。

1. 到處都是樣板代碼

在 React 中管理表單狀態通常是這樣開始的：

const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [error, setError] = useState(null); function handleSubmit(event) { event.preventDefault(); }

✅ 這很簡單——對於小型表單來說完全沒問題。

但一旦你擴展規模，你就會淹沒在重複的狀態鉤子、手動重置和無盡的event.preventDefault()調用中。

每次按鍵都會觸發重新渲染，而管理錯誤或待處理狀態需要更多的狀態變數。它是可行的，但遠非優雅。

2. Props 鑽取

當你的表單不僅僅是一個組件，而是一個嵌套組件的層次結構時，你最終會通過每一層傳遞 props：

<Form> <Field error={error} value={name} onChange={setName}> <Input /> </Field> </Form>

狀態、錯誤、加載標誌——所有這些都通過多層向下鑽取。📉 這不僅使代碼膨脹，還使維護和重構變得痛苦。😓

3. 樂觀更新很難實現

你曾經嘗試過手動實現樂觀更新嗎？

這是指在用戶操作後立即在 UI 中顯示"成功"變更——在服務器實際確認之前。

聽起來很簡單，但當請求失敗時管理回滾邏輯可能是一個真正的頭痛問題。🤕

你在哪裡存儲臨時的樂觀狀態？如何合併然後回滾它？🔄

React 19 為此引入了更加簡潔的解決方案。

useActionState：處理表單提交的新方式

React 19 中最令人興奮的新增功能之一是 ==*useActionState*== 鉤子。

它通過將異步表單提交、狀態管理和加載指示結合在一起，簡化了表單邏輯。🎯

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

這裡發生的事情是：

• ==fn== — 處理表單提交的異步函數

• ==initialState== — 表單狀態的初始值

• ==isPending== — 顯示提交是否正在進行的內置標誌

  \

它是如何工作的

傳遞給 ==useActionState== 的異步函數自動接收兩個參數：

const action = async (previousState, formData) => { const message = formData.get('message'); try { await sendMessage(message); return { success: true, error: null }; } catch (error) { return { success: false, error }; } };

然後你將它掛鉤到你的表單中，如下所示：

const [state, actionFunction, isPending] = useActionState(action, { success: false, error: null, }); return <form action={actionFunction}> ... </form>;

現在，當表單提交時，React 自動：

• 調用你的異步 ==action==
• 使用返回的結果更新 **==*state*==**
• 通過 ==isPending== 跟踪提交過程

不再需要手動 ==useState, preventDefault,== 或重置邏輯 — React 會處理所有這些。⚙️

關於 startTransition 的說明

如果你決定手動觸發表單操作（例如，在表單的 action 屬性之外），請用 ==startTransition== 包裝它：

const handleSubmit = async (formData) => { await doSomething(); startTransition(() => { actionFunction(formData); }); };

否則，React 會警告你在轉換之外發生了異步更新，並且 ==isPending== 不會正確更新。

為什麼你會喜歡 useActionState

• ✅ 不需要多個 ==*useState*== 鉤子
• ✅ 自動待處理狀態（==isPending==）
• ✅ 不需要 ==event.preventDefault==()
• ✅ 成功提交後自動重置表單

表單邏輯再次感覺具有聲明性 — 只需描述操作，而不是連接。

useFormStatus：不再需要 props 鑽取

另一個強大的新鉤子 — ==useFormStatus== — 解決了表單樹中的 prop 鑽取問題。

import { useFormStatus } from 'react-dom'; const { pending, data, method, action } = useFormStatus();

你可以在表單的任何子組件內調用這個鉤子，它會自動連接到父表單的狀態。

示例

function SubmitButton() { const { pending, data } = useFormStatus(); const message = data ? data.get('message') : ''; return ( <button type="submit" disabled={pending}> {pending ? `Sending ${message}...` : 'Send'} </button> ); } function MessageForm() { return ( <form action={submitMessage}> <SubmitButton /> </form> ); }

:::info 注意 ==SubmitButton== 可以訪問表單的數據和待處理狀態 — 無需傳遞任何 props。

:::

需要記住的陷阱

• ❌ 如果你在渲染表單的同一組件中調用它，它不會工作。它必須在子組件內部。
• ❌ 它不會對使用 onSubmit 處理程序的表單做出反應 — 它必須是具有 ***action*** 屬性的表單。
• ⚠️ 目前，按鈕或輸入框內的 formMethod 覆蓋（例如，formMethod="get"）不能按預期工作 — 表單仍然使用主要方法。 🐛 我已經在 GitHub 上開了一個問題來追踪這個錯誤。

為什麼 useFormStatus 很重要

🧩 消除表單樹中的 prop 鑽取 ⚡ 使子組件內的上下文決策成為可能 💡 保持組件解耦和更加簡潔

useOptimistic：聲明式樂觀 UI

最後，讓我們談談我最喜歡的新增功能之一 — ==useOptimistic==。

它為樂觀 UI 更新提供了內置支持，使用戶交互感覺即時且流暢。

問題

想像點擊"添加到收藏夾"。你希望立即顯示更新 — 在服務器響應之前。

傳統上，你需要在本地狀態、回滾邏輯和異步請求之間進行平衡。

解決方案

使用 ==useOptimistic==，它變得聲明式且簡潔：

const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (state, newMessage) => [newMessage, ...state] ); const formAction = async (formData) => { addOptimisticMessage(formData.get('message')); try { await sendMessage(formData); } catch { console.error('Failed to send message'); } };

如果服務器請求失敗，React 會自動回滾到之前的狀態。

如果成功 — 樂觀變更保持不變。

重要規則：不要變異

你傳遞給 useOptimistic 的更新函數必須是純函數：

❌ 錯誤：

(prev, newTodo) => { prev.push(newTodo); return prev; }

✅ 正確：

(prev, newTodo) => [...prev, newTodo];

:::tip 始終返回一個新的狀態對象或數組！

:::

與 startTransition 一起使用

如果你在表單的 action 之外觸發樂觀更新，請將它們包裝在 startTransition 中：

startTransition(() => { addOptimisticMessage(formData.get('message')); sendMessage(formData); });

否則，React 會警告你在轉換之外發生了樂觀更新。💡

useOptimistic 的好處

• ⚡ 即時 UI 反饋
• 🔄 錯誤時自動回滾
• 🧼 更簡潔的組件邏輯
• ⏳ 需要更少的加載狀態