2025年8月21日中文

学习如何使用 useFormStatus hook 有效管理 React 应用程序中的表单提交状态。本指南为全球开发者提供实用的例子和最佳实践。

掌握 React 的 useFormStatus Hook：面向全球开发者的综合指南

表单提交是现代 web 应用程序中无处不在的一部分。从简单的联系表单到复杂的多步骤应用程序，在提交期间管理表单的状态对于流畅和直观的用户体验至关重要。React 18 中引入的 React 的 useFormStatus hook 提供了一种方便而强大的方法来跟踪表单的提交状态，从而简化异步操作并改善整体用户界面。本综合指南深入研究了 useFormStatus 的复杂性，使全球开发者能够掌握构建健壮且用户友好的表单所需的知识和实践示例。

了解表单提交状态管理的需求

在深入研究 useFormStatus 之前，必须了解为什么管理表单提交状态如此重要。考虑一个用户提交表单。如果没有适当的状态管理，可能会出现以下问题：

用户困惑：如果用户单击提交按钮而没有任何反应，他们可能会认为表单未提交，从而导致多次提交或沮丧。
不良的用户体验：如果没有视觉反馈（例如，加载指示器），用户将被蒙在鼓里，使应用程序感觉缓慢且无响应。
数据完整性问题：多次提交可能导致重复条目或不正确的数据处理。

有效的表单提交状态管理通过提供清晰的视觉提示和在提交过程中控制用户交互来解决这些问题。这包括显示加载状态，禁用提交按钮以及提供成功或错误消息。

介绍 React 的 useFormStatus Hook

useFormStatus hook 专门用于跟踪表单的提交状态。它提供有关表单是否正在提交、是否已成功提交或是否遇到错误的信息。然后，可以使用此信息来更新 UI 并向用户提供反馈。它简化了与表单提交相关的异步操作的处理，例如 API 调用。

主要特点：

自动状态跟踪：自动跟踪表单提交的加载、成功和错误状态，从而简化开发。
易于实施：与现有表单结构无缝集成，从而最大限度地减少了样板代码。
改进的用户体验：支持创建动态和响应式表单。
优化的性能：提供了一种比使用 useState 或类似方法手动管理状态更有效的替代方案。

useFormStatus 的基本用法

useFormStatus hook 相对容易使用。这是一个简单的示例，演示了它的基本实现：

            
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Simulate an API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' /><br />

      <button type='submit' disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

说明：

我们从 react-dom 导入 useFormStatus。
我们在组件中调用 useFormStatus()，获取一个状态对象，在本例中特别是 pending 属性。
pending 属性是一个布尔值，指示表单当前是否正在提交。
提交按钮在表单正在提交时被禁用（pending 为 true）。
按钮的文本在 pending 时更改为“Submitting...” 。

useFormStatus 的高级功能

除了基本的 pending 状态之外，useFormStatus 还提供了其他功能来增强表单管理。

1. 使用 `action`

在更复杂的场景中，useFormStatus 可以跟踪特定表单操作的状态。这使得可以根据操作的状态对 UI 进行精细控制。 action prop 允许您将 hook 的状态绑定到特定的表单操作。

            
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending, method, action } = useFormStatus();

  const handleSubmit = async (formData) => {
    // Simulate an API call
    const response = await fetch('/api/submit-form', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
        console.log('Form submitted successfully!');
    } else {
        console.error('Form submission failed.');
    }
  };

  return (
    <form action={handleSubmit} method='POST'>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' /><br />

      <button type='submit' disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

说明：

`form` 元素上的 `action` prop 被分配给 handleSubmit 函数，该函数将成为表单将执行的操作。
该 hook 跟踪该特定操作的状态。
`method` 指定表单提交的 HTTP 方法（例如，POST、GET）。

2. 访问 `data`

当您有一个将数据直接提交到 `action` 的表单时，`data` 属性可用。 `data` 是 FormData 对象，或 `action` 接收的第一个参数的任何内容。

            
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending, data, action } = useFormStatus();

    async function handleSubmit(formData) {
        // Simulate an API call that uses the data
        const response = await fetch('/api/submit-form', {
            method: 'POST',
            body: formData
        });
        if (response.ok) {
            console.log('Form submitted successfully!');
        } else {
            console.error('Form submission failed.');
        }
    }

  return (
    <form action={handleSubmit} method='POST'>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' /><br />

      <button type='submit' disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

在这种情况下，`handleSubmit` 函数直接接收表单数据。 `action` prop 允许组件从表单本身接收此数据

全球应用程序的最佳实践和注意事项

将 useFormStatus 集成到全球应用程序中时，请考虑以下最佳实践：

1. 国际化 (i18n)

适应性：使用国际化库（例如，i18next、react-intl）将标签、错误消息和成功消息翻译成多种语言。这确保了来自不同国家/地区的用户可以理解表单的内容和反馈。

示例：

            
import { useTranslation } from 'react-i18next';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { t } = useTranslation();
  const { pending } = useFormStatus();

  return (
    <form>
      <label htmlFor='name'>{t('nameLabel')}:</label>
      <input type='text' id='name' name='name' /><br />
      <button type='submit' disabled={pending}>{pending ? t('submitting') : t('submit')}</button>
    </form>
  );
}

2. 本地化 (l10n)

货币和日期格式：根据用户的区域设置处理货币格式、日期格式和数字格式。使用诸如 Intl 之类的库来正确格式化数字和日期。这对于处理金融交易或日程安排的表单尤其重要。

示例：

            
const amount = 1234.56;
const formattedAmount = new Intl.NumberFormat(userLocale, { style: 'currency', currency: 'USD' }).format(amount);
// Output: $1,234.56 (US locale)
// Output: 1 234,56 $ (French locale)

3. 时区注意事项

时区：如果您的表单涉及计划、预订或事件，请确保应用程序正确处理时区。将时间存储在 UTC 中，并将其转换为用户的本地时区以进行显示。

4. 可访问性

可访问性指南：遵守可访问性指南 (WCAG) 以使您的表单可供所有人使用，包括残疾用户。使用适当的 ARIA 属性为辅助技术提供上下文。

5. 性能优化

性能：优化您的表单提交以获得最佳性能。考虑以下技术：

防抖：防抖表单输入更改，特别是对于搜索表单，以避免过多的 API 调用。
错误处理：实施强大的错误处理。如果 API 调用失败，请向用户提供清晰且可操作的错误消息。
优化网络请求：通过使用高效的数据格式来最大限度地减少通过网络发送的数据大小。

6. 用户体验 (UX)

视觉反馈：在表单提交期间始终向用户提供视觉反馈。使用加载指示器，禁用提交按钮，并显示清晰的成功或错误消息。使用动画以获得更复杂的反馈。

视觉反馈示例：

            
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  const handleSubmit = async (event) => {
    event.preventDefault();
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' /><br />
      <button type='submit' disabled={pending}>
        {pending ? ( <img src='/loading.gif' alt='Loading' /> ) : 'Submit'}
      </button>
    </form>
  );
}

错误处理：妥善处理表单验证错误。在相关输入字段附近显示错误消息，并突出显示无效字段。

可访问性：确保残疾用户可以访问表单。使用适当的标签、ARIA 属性和键盘导航。

7. 服务器端注意事项

服务器端验证：始终执行服务器端验证以确保数据完整性。客户端验证有助于用户体验，但并非万无一失。还要考虑安全性，方法是在将任何数据存储在数据库中之前对其进行清理。

8. 安全

安全：保护您的表单免受常见漏洞的侵害，例如：

跨站点脚本 (XSS)：清理用户输入以防止 XSS 攻击。
跨站点请求伪造 (CSRF)：实施 CSRF 保护以防止未经授权的表单提交。
输入验证：正确验证用户输入以防止提交恶意数据。

实用示例和用例

让我们探讨一些在不同场景中使用 useFormStatus 的实用示例。

1. 联系表单

一个简单的联系表单是一个常见的用例。此示例说明了 useFormStatus 的基本用法：

            
import { useFormStatus } from 'react-dom';
import { useState } from 'react';

function ContactForm() {
  const [submissionResult, setSubmissionResult] = useState(null);
  const { pending } = useFormStatus();

  async function handleSubmit(formData) {
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        setSubmissionResult('success');
      } else {
        setSubmissionResult('error');
      }
    } catch (error) {
      setSubmissionResult('error');
      console.error('Submission error:', error);
    }
  }

  return (
    <form action={handleSubmit} method='POST'>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' /><br />

      <label htmlFor='email'>Email:</label>
      <input type='email' id='email' name='email' /><br />

      <label htmlFor='message'>Message:</label>
      <textarea id='message' name='message' /><br />

      <button type='submit' disabled={pending}>
        {pending ? 'Submitting...' : 'Send Message'}
      </button>

      {submissionResult === 'success' && <p>Message sent successfully!</p>}
      {submissionResult === 'error' && <p style={{ color: 'red' }}>There was an error sending your message. Please try again.</p>}
    </form>
  );
}

说明：

handleSubmit 函数将表单数据发送到 API 端点。
pending 状态用于在 API 调用期间禁用提交按钮并显示加载消息。
submissionResult 状态用于显示成功或错误消息。

2. 带有验证的注册表单

带有验证的注册表单更加复杂。在这里，我们将表单验证与 useFormStatus 集成。

            
import { useFormStatus } from 'react-dom';
import { useState } from 'react';

function SignUpForm() {
  const [errors, setErrors] = useState({});
  const { pending } = useFormStatus();

  const validateForm = (formData) => {
    const newErrors = {};
    if (!formData.name) {
      newErrors.name = 'Name is required.';
    }
    if (!formData.email) {
      newErrors.email = 'Email is required.';
    }
    // Add more validation rules as needed
    return newErrors;
  };

  async function handleSubmit(formData) {
    const formErrors = validateForm(formData);
    if (Object.keys(formErrors).length > 0) {
      setErrors(formErrors);
      return;
    }

    try {
      const response = await fetch('/api/signup', {
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        // Handle successful signup
        alert('Signup successful!');
      } else {
        // Handle signup errors
        alert('Signup failed. Please try again.');
      }
    } catch (error) {
      console.error('Signup error:', error);
    }
  }

  return (
    <form action={handleSubmit} method='POST'>
      <label htmlFor='name'>Name:</label>
      <input type='text' id='name' name='name' />
      {errors.name && <span style={{ color: 'red' }}>{errors.name}</span>}<br />

      <label htmlFor='email'>Email:</label>
      <input type='email' id='email' name='email' />
      {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}<br />

      <button type='submit' disabled={pending}>
        {pending ? 'Signing Up...' : 'Sign Up'}
      </button>
    </form>
  );
}

说明：

validateForm 函数执行客户端表单验证。
errors 状态存储验证错误。
验证错误显示在相关输入字段旁边。

3. 电子商务结账表单

电子商务结账表单可能非常复杂。这包括多个步骤、验证和付款处理。 useFormStatus 可用于这些步骤中的每一个。

            
import { useFormStatus } from 'react-dom';
import { useState } from 'react';

function CheckoutForm() {
  const { pending, action } = useFormStatus();
  const [step, setStep] = useState(1); // Step 1: Shipping, Step 2: Payment, Step 3: Review
  const [shippingInfo, setShippingInfo] = useState({});
  const [paymentInfo, setPaymentInfo] = useState({});

  // Implement separate submit handlers for each step

  const handleShippingSubmit = async (formData) => {
    // Validate shipping info
    // if (validationError) return;
    setShippingInfo(formData);
    setStep(2);
  }

  const handlePaymentSubmit = async (formData) => {
    // Validate payment info
    // if (validationError) return;
    setPaymentInfo(formData);
    setStep(3);
  }

  const handleConfirmOrder = async (formData) => {
    // Submit order to backend
    // ...
  }

  return (
    <form action={step === 1 ? handleShippingSubmit : step === 2 ? handlePaymentSubmit : handleConfirmOrder} method='POST'>
      {step === 1 && (
        <div>
          <h2>Shipping Information</h2>
          <label htmlFor='address'>Address:</label>
          <input type='text' id='address' name='address' /><br />
          <button type='submit' disabled={pending}>
            {pending ? 'Saving...' : 'Next'}
          </button>
        </div>
      )}

      {step === 2 && (
        <div>
          <h2>Payment Information</h2>
          <label htmlFor='cardNumber'>Card Number:</label>
          <input type='text' id='cardNumber' name='cardNumber' /><br />
          <button type='submit' disabled={pending}>
            {pending ? 'Processing...' : 'Next'}
          </button>
        </div>
      )}

      {step === 3 && (
        <div>
          <h2>Review Order</h2>
          <p>Shipping Information: {JSON.stringify(shippingInfo)}</p>
          <p>Payment Information: {JSON.stringify(paymentInfo)}</p>
          <button type='submit' disabled={pending}>
            {pending ? 'Placing Order...' : 'Place Order'}
          </button>
        </div>
      )}
    </form>
  );
}

说明：

结账流程分为多个步骤。
每个步骤都单独处理，具有自己的验证和提交逻辑。
pending 状态和适当的标签用于指导用户。

结论

React 的 useFormStatus hook 是管理表单提交状态的宝贵工具，尤其是在现代交互式 web 应用程序中。通过使用此 hook，开发人员可以创建更具响应性、用户友好性和健壮性的表单。通过应用本指南中讨论的最佳实践，全球开发人员可以有效地利用 useFormStatus，从而改善用户体验并创建更直观和可访问的应用程序。随着 Web 的不断发展，理解和实现这些功能对于构建引人入胜的用户界面至关重要。请记住优先考虑可访问性、国际化和安全性，以构建满足全球受众需求的表单。

拥抱 useFormStatus 的强大功能，以提高您的表单处理能力，并为世界各地的用户创造更好的 Web 体验！