React useFormStatus: Làm chủ việc Theo dõi Tiến trình Gửi Form

Trong phát triển web hiện đại, việc cung cấp trải nghiệm người dùng liền mạch và đầy đủ thông tin trong quá trình gửi form là rất quan trọng. Hook useFormStatus của React, được giới thiệu trong React 18, cung cấp một giải pháp mạnh mẽ và thanh lịch để theo dõi trạng thái gửi của một form. Hướng dẫn toàn diện này sẽ đi sâu vào các chi tiết của useFormStatus, khám phá các chức năng, trường hợp sử dụng và các phương pháp hay nhất để tạo ra các tương tác form hấp dẫn và phản hồi nhanh.

React useFormStatus là gì?

useFormStatus là một hook của React được thiết kế để cung cấp thông tin về trạng thái của một quá trình gửi form. Nó đơn giản hóa quy trình quản lý và hiển thị tiến trình gửi, xử lý lỗi và cập nhật giao diện người dùng tương ứng. Trước khi có hook này, các nhà phát triển thường phải dựa vào việc quản lý trạng thái thủ công và các hoạt động bất đồng bộ, điều này có thể dẫn đến mã phức tạp và dễ gây lỗi.

Hook này trả về một đối tượng với các thuộc tính sau:

• pending: Một giá trị boolean cho biết liệu form có đang được gửi hay không.
• data: Dữ liệu được gửi bởi form, nếu có.
• method: Phương thức HTTP được sử dụng để gửi form (ví dụ: "POST", "GET").
• action: Hàm hoặc URL xử lý việc gửi form.
• error: Một đối tượng lỗi nếu việc gửi thất bại. Điều này cho phép bạn hiển thị thông báo lỗi cho người dùng.

Tại sao nên sử dụng useFormStatus? Lợi ích và Ưu điểm

Việc tận dụng useFormStatus mang lại một số lợi thế chính:

• Quản lý trạng thái Form đơn giản hóa: Tập trung hóa việc quản lý trạng thái gửi form, giảm mã lặp lại và cải thiện khả năng bảo trì.
• Cải thiện trải nghiệm người dùng: Cung cấp một cách rõ ràng và nhất quán để chỉ báo tiến trình gửi cho người dùng, tăng cường sự tương tác và giảm bớt sự khó chịu.
• Tăng cường xử lý lỗi: Đơn giản hóa việc phát hiện và báo cáo lỗi, cho phép xử lý các thất bại khi gửi một cách mượt mà.
• Cách tiếp cận khai báo: Thúc đẩy phong cách viết mã khai báo hơn, làm cho mã dễ đọc và dễ hiểu hơn.
• Tích hợp với Server Actions: Tích hợp liền mạch với React Server Actions, giúp tinh giản hơn nữa việc xử lý form trong các ứng dụng được render phía máy chủ.

Cách sử dụng cơ bản: Một ví dụ đơn giản

Hãy bắt đầu với một ví dụ cơ bản để minh họa cách sử dụng cơ bản của useFormStatus.

Kịch bản: Một Form liên hệ đơn giản

Hãy tưởng tượng một form liên hệ đơn giản với các trường dành cho tên, email và tin nhắn. Chúng ta muốn hiển thị một chỉ báo tải trong khi form đang được gửi và hiển thị thông báo lỗi nếu việc gửi thất bại.

Ví dụ mã nguồn

Đầu tiên, hãy định nghĩa một server action đơn giản (thông thường, nó sẽ nằm trong một tệp riêng, nhưng được bao gồm ở đây để hoàn chỉnh):

async function submitForm(formData) {
  'use server';
  // Mô phỏng độ trễ để minh họa trạng thái "pending".
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Mô phỏng một lỗi tiềm ẩn.
  const name = formData.get('name');
  if (name === 'error') {
    throw new Error('Lỗi gửi mô phỏng.');
  }

  console.log('Form đã được gửi thành công:', formData);
  return { message: 'Form đã được gửi thành công!' };
}

Bây giờ, hãy tạo thành phần React sử dụng useFormStatus:

'use client';

import { useFormStatus } from 'react-dom';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Tên:
        
      
      

        Email:
        
      
      

        Tin nhắn:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Đang gửi...' : 'Gửi'}
      </button>
      {error && <p style={{ color: 'red' }}>Lỗi: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>Giải thích</h3>

<ul>
  <li>Chúng ta import <code>useFormStatus</code> từ <code>'react-dom'</code>. Lưu ý rằng đây là một client component vì nó đang sử dụng một hook phía client.</li>
  <li>Chúng ta gọi <code>useFormStatus()</code> bên trong thành phần <code>ContactForm</code> để lấy các giá trị <code>pending</code>, <code>data</code>, và <code>error</code>.</li>
  <li>Giá trị <code>pending</code> được sử dụng để vô hiệu hóa nút gửi và hiển thị thông báo "Đang gửi..." trong khi form đang được gửi.</li>
  <li>Nếu có <code>error</code> xảy ra, thông báo của nó sẽ được hiển thị trong một đoạn văn màu đỏ.</li>
  <li>Nếu <code>data</code> được trả về từ server action, chúng ta sẽ hiển thị một thông báo thành công.</li>
</ul>

<h2>Các trường hợp sử dụng và kỹ thuật nâng cao</h2>

<p>Ngoài ví dụ cơ bản, <code>useFormStatus</code> có thể được sử dụng trong các kịch bản phức tạp hơn để nâng cao trải nghiệm người dùng và xử lý các yêu cầu gửi form khác nhau.</p>

<h3>1. Chỉ báo tải và hoạt ảnh tùy chỉnh</h3>

<p>Thay vì một văn bản "Đang gửi..." đơn giản, bạn có thể sử dụng các chỉ báo tải hoặc hoạt ảnh tùy chỉnh để cung cấp một trải nghiệm hấp dẫn hơn về mặt hình ảnh. Ví dụ, bạn có thể sử dụng một thành phần spinner hoặc một thanh tiến trình.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... các trường của form ... */}
      <button type="submit" disabled={pending}>
        {pending ? <Spinner /> : 'Gửi'}
      </button>
      {error && <p style={{ color: 'red' }}>Lỗi: {error.message}</p>}
    </form>
  );
}

function Spinner() {
  return <div>Đang tải...</div>; // Thay thế bằng thành phần spinner của bạn
}
</code>
</pre>

<h3>2. Cập nhật lạc quan (Optimistic Updates)</h3>

<p>Cập nhật lạc quan cung cấp phản hồi ngay lập tức cho người dùng bằng cách cập nhật giao diện người dùng như thể việc gửi form đã thành công, ngay cả trước khi nhận được xác nhận từ máy chủ. Điều này có thể cải thiện đáng kể hiệu suất cảm nhận được của ứng dụng của bạn.</p>

<p><b>Lưu ý:</b> Cập nhật lạc quan đòi hỏi phải xem xét cẩn thận việc xử lý lỗi và tính nhất quán của dữ liệu. Nếu việc gửi thất bại, bạn cần hoàn nguyên giao diện người dùng về trạng thái trước đó.</p>

<h3>3. Xử lý các kịch bản lỗi khác nhau</h3>

<p>Thuộc tính <code>error</code> được trả về bởi <code>useFormStatus</code> cho phép bạn xử lý các kịch bản lỗi khác nhau, chẳng hạn như lỗi xác thực, lỗi mạng và lỗi phía máy chủ. Bạn có thể sử dụng render có điều kiện để hiển thị các thông báo lỗi cụ thể dựa trên loại lỗi.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... các trường của form ... */}
      <button type="submit" disabled={pending}>
        {pending ? 'Đang gửi...' : 'Gửi'}
      </button>
      {error && error.message === 'Validation Error' && (
        <p style={{ color: 'red' }}>Vui lòng sửa các lỗi xác thực.</p>
      )}
      {error && error.message === 'Network Error' && (
        <p style={{ color: 'red' }}>Đã xảy ra lỗi mạng. Vui lòng thử lại sau.</p>
      )}
      {error && error.message !== 'Validation Error' && error.message !== 'Network Error' && (
        <p style={{ color: 'red' }}>Đã xảy ra một lỗi không mong muốn.</p>
      )}
    </form>
  );
}
</code>
</pre>

<h3>4. Tích hợp với các thư viện form của bên thứ ba</h3>

<p>Mặc dù <code>useFormStatus</code> cung cấp một cách đơn giản để theo dõi trạng thái gửi form, bạn có thể muốn tích hợp nó với các thư viện form toàn diện hơn như Formik hoặc React Hook Form. Các thư viện này cung cấp các tính năng nâng cao như xác thực, quản lý trạng thái form và xử lý việc gửi.</p>

<p>Bạn có thể sử dụng <code>useFormStatus</code> để bổ sung cho các thư viện này bằng cách cung cấp một cách nhất quán để hiển thị tiến trình gửi và xử lý lỗi.</p>

<h3>5. Thanh tiến trình và tỷ lệ phần trăm</h3>

<p>Đối với các quá trình gửi form kéo dài, việc hiển thị thanh tiến trình hoặc tỷ lệ phần trăm có thể cung cấp phản hồi có giá trị cho người dùng và giữ cho họ tương tác. Mặc dù `useFormStatus` không trực tiếp cung cấp cho bạn tiến trình, bạn có thể kết hợp nó với một server action báo cáo tiến trình (ví dụ, thông qua server-sent events hoặc websockets).</p>

<h2>Các phương pháp hay nhất khi sử dụng useFormStatus</h2>

<p>Để tận dụng hiệu quả <code>useFormStatus</code> và tạo ra trải nghiệm form mạnh mẽ và thân thiện với người dùng, hãy xem xét các phương pháp hay nhất sau:</p>

<ul>
  <li><b>Cung cấp phản hồi trực quan rõ ràng:</b> Luôn cung cấp phản hồi trực quan cho người dùng trong quá trình gửi form, chẳng hạn như chỉ báo tải, thanh tiến trình hoặc thông báo trạng thái.</li>
  <li><b>Xử lý lỗi một cách mượt mà:</b> Thực hiện xử lý lỗi mạnh mẽ để phát hiện và báo cáo các thất bại khi gửi, cung cấp thông báo lỗi đầy đủ thông tin cho người dùng.</li>
  <li><b>Xem xét khả năng truy cập:</b> Đảm bảo rằng các tương tác form của bạn có thể truy cập được bởi người dùng khuyết tật, cung cấp các thuộc tính ARIA thích hợp và hỗ trợ điều hướng bằng bàn phím.</li>
  <li><b>Tối ưu hóa hiệu suất:</b> Tránh các lần render lại không cần thiết bằng cách memoize các thành phần và tối ưu hóa việc tìm nạp dữ liệu.</li>
  <li><b>Kiểm thử kỹ lưỡng:</b> Kiểm thử kỹ lưỡng các tương tác form của bạn để đảm bảo chúng hoạt động như mong đợi trong các kịch bản và môi trường khác nhau.</li>
</ul>

<h2>useFormStatus và Server Actions</h2>

<p><code>useFormStatus</code> được thiết kế để hoạt động liền mạch với React Server Actions, một tính năng mạnh mẽ để xử lý việc gửi form trực tiếp trên máy chủ. Server Actions cho phép bạn định nghĩa các hàm phía máy chủ có thể được gọi trực tiếp từ các thành phần React của bạn, mà không cần một điểm cuối API riêng biệt.</p>

<p>Khi được sử dụng với Server Actions, <code>useFormStatus</code> tự động theo dõi trạng thái gửi của action, cung cấp một cách đơn giản và nhất quán để quản lý các tương tác form.</p>

<h2>So sánh với cách xử lý Form truyền thống</h2>

<p>Trước khi có <code>useFormStatus</code>, các nhà phát triển thường dựa vào việc quản lý trạng thái thủ công và các hoạt động bất đồng bộ để xử lý việc gửi form. Cách tiếp cận này thường bao gồm các bước sau:</p>

<ul>
  <li>Tạo một biến trạng thái để theo dõi trạng thái gửi (ví dụ: <code>isSubmitting</code>).</li>
  <li>Viết một trình xử lý sự kiện để xử lý việc gửi form.</li>
  <li>Thực hiện một yêu cầu bất đồng bộ đến máy chủ.</li>
  <li>Cập nhật trạng thái dựa trên phản hồi từ máy chủ.</li>
  <li>Xử lý lỗi và hiển thị thông báo lỗi.</li>
</ul>

<p>Cách tiếp cận này có thể rườm rà và dễ gây lỗi, đặc biệt đối với các form phức tạp có nhiều trường và quy tắc xác thực. <code>useFormStatus</code> đơn giản hóa quy trình này bằng cách cung cấp một cách khai báo và tập trung để quản lý trạng thái gửi form.</p>

<h2>Ví dụ và các trường hợp sử dụng trong thực tế</h2>

<p><code>useFormStatus</code> có thể được áp dụng cho một loạt các kịch bản trong thực tế, bao gồm:</p>

<ul>
  <li><b>Form thanh toán thương mại điện tử:</b> Hiển thị chỉ báo tải trong khi xử lý thông tin thanh toán.</li>
  <li><b>Form đăng ký người dùng:</b> Xác thực đầu vào của người dùng và xử lý việc tạo tài khoản.</li>
  <li><b>Hệ thống quản lý nội dung:</b> Gửi bài viết, bài đăng blog và nội dung khác.</li>
  <li><b>Nền tảng mạng xã hội:</b> Đăng bình luận, thích bài viết và chia sẻ nội dung.</li>
  <li><b>Ứng dụng tài chính:</b> Xử lý giao dịch, quản lý tài khoản và tạo báo cáo.</li>
</ul>

<h2>Kết luận</h2>

<p>Hook <code>useFormStatus</code> của React là một công cụ có giá trị để quản lý tiến trình gửi form và nâng cao trải nghiệm người dùng trong các ứng dụng web hiện đại. Bằng cách đơn giản hóa việc quản lý trạng thái form, cải thiện xử lý lỗi và cung cấp một cách tiếp cận khai báo, <code>useFormStatus</code> trao quyền cho các nhà phát triển để tạo ra các tương tác form hấp dẫn và phản hồi nhanh hơn. Bằng cách hiểu rõ các chức năng, trường hợp sử dụng và các phương pháp hay nhất của nó, bạn có thể tận dụng <code>useFormStatus</code> để xây dựng các form mạnh mẽ và thân thiện với người dùng, đáp ứng nhu cầu của bối cảnh phát triển web ngày nay.</p>

<p>Khi bạn khám phá <code>useFormStatus</code>, hãy nhớ xem xét khả năng truy cập, tối ưu hóa hiệu suất và kiểm thử kỹ lưỡng để đảm bảo rằng các form của bạn vừa hoạt động tốt vừa thân thiện với người dùng cho khán giả toàn cầu. Bằng cách áp dụng những nguyên tắc này, bạn có thể tạo ra các tương tác form liền mạch, đầy đủ thông tin và hấp dẫn, cuối cùng góp phần vào một trải nghiệm người dùng tổng thể tốt hơn.</p>

<p>Bài viết này đã cung cấp một cái nhìn tổng quan toàn diện về <code>useFormStatus</code>. Hãy nhớ tham khảo tài liệu chính thức của React để có thông tin cập nhật nhất và chi tiết về API. Chúc bạn lập trình vui vẻ!</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gửi form</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">tiến trình form</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">trạng thái chờ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">xử lý lỗi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">phát triển web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">phát triển front-end</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">trải nghiệm người dùng</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UX</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>