React の useActionState: 効率的なフォーム管理のための究極のツール-jsチュートリアル-php.cn

React の useActionState: 効率的なフォーム管理のための究極のツール

PHPz

リリース： 2024-07-19 16:03:00

オリジナル

809 人が閲覧しました

Image description React 19 は間もなく登場し、開発エクスペリエンスを強化するエキサイティングな新機能をもたらします。顕著な追加機能の 1 つは useActionState フックで、これは React アプリケーションでのフォームの管理方法に革命をもたらします。このブログ投稿では、この新しいフックを活用して、よりクリーンで効率的なコードを作成する方法を検討します。

React 19 のセットアップ

React 19 を使い始めるには、新しいプロジェクトをセットアップし、React 19 のベータ版をインストールする必要があります。
npm create vite@latest
npm install 反応@ベータ反応-dom@ベータ

これにより、最新バージョンの React を使用してプロジェクトがセットアップされます。

React での従来のフォーム管理

React でフォームを管理するには、従来、入力フィールドごとに個別の状態を作成し、読み込み状態とエラー状態を処理し、フォームデータを管理するための広範なコードを記述する必要がありました。典型的な例を次に示します:

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const handleSubmit = async (event) => {
  event.preventDefault();
  setLoading(true);
  setError(null);
  try {
    // Simulate API call
    const response = await fakeApiCall(username, password);
    console.log(response);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

ログイン後にコピー

フォームが複雑になると、このアプローチは面倒になる可能性があります。

useActionState の導入

useActionState フックは、複数の状態変数の必要性を排除し、定型コードを削減することでフォーム管理を簡素化します。使用方法は次のとおりです:

段階的な実装

従来の状態を削除: 各入力フィールドの個別の状態を削除します。
useActionState をインストールします: プロジェクトが React 19 で設定されていることを確認します。
フォーム処理のリファクタリング: useActionState を使用してフォームデータと状態の更新を管理します。

例

import { useActionState } from 'react';

const LoginForm = () => {
  const [state, submitAction, isPending] = useActionState(async (formData) => {
    const response = await fakeApiCall(formData.get('username'), formData.get('password'));
    return { data: response.data, error: null };
  }, { data: null, error: null });

  return (
    <form onSubmit={submitAction}>
      <input name="username" placeholder="Username" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit" disabled={isPending}>Login</button>
      {state.error && <p>{state.error}</p>}
      {state.data && <p>Welcome, {state.data.username}!</p>}
    </form>
  );
};

ログイン後にコピー

この例では、useActionState がフォームデータ、送信状態、エラー管理を処理し、コードを大幅に簡素化します。