React 19 RC useActionState 的使用

React 最近发布了 React 19 RC 版本，带来了许多新功能和改进。本文主要介绍其中的 useActionState hook，以及如何结合 Astro Actions 使用。

介绍 useActionState

useActionState 是 React 19 中引入的一个新 hook，用于简化处理表单提交和状态管理。它接受一个异步操作和默认值，并返回当前的状态、提交函数和加载状态。这个 hook 主要解决了在表单提交时的繁琐状态管理问题，使代码更加简洁和直观。

没有 useActionState 之前

在引入 useActionState 之前，我们通常需要手动管理状态和异步操作。例如，处理一个简单的表单提交：

import { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [isPending, setIsPending] = useState(false);
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsPending(true);
    try {
      const res = await fetch('/api/updateName', {
        method: 'POST',
        body: JSON.stringify({ name }),
      });
      const data = await res.json();
      setResponse(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsPending(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit" disabled={isPending}>Update</button>
      {isPending && <p>Updating...</p>}
      {error && <p>{error}</p>}
      {response && <p>{response.message}</p>}
    </form>
  );
}

这段代码需要手动管理多个状态，并处理表单的提交逻辑。

使用 useActionState

有了 useActionState，代码变得更为简洁。以下是使用 useActionState 的例子：

import { useActionState } from 'react';

function Form() {
  const [state, submitAction, isPending] = useActionState(
    async (name) => {
      const res = await fetch('/api/updateName', {
        method: 'POST',
        body: JSON.stringify({ name }),
      });
      return res.json();
    },
    ''
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" placeholder="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {isPending && <p>Updating...</p>}
      {state && <p>{state.message}</p>}
    </form>
  );
}

useActionState 接受一个异步操作和默认值，返回当前的状态、提交函数和加载状态。这样，我们只需要关注表单的提交逻辑，而不用手动管理多个状态。