React experimental_useFormStatus: Làm chủ việc theo dõi trạng thái lỗi của Form

Hệ sinh thái không ngừng phát triển của React liên tục giới thiệu các tính năng nhằm đơn giản hóa việc phát triển và nâng cao trải nghiệm người dùng. Một trong những bổ sung gần đây, hiện đang trong giai đoạn thử nghiệm, là hook experimental_useFormStatus. Công cụ mạnh mẽ này cung cấp một cách thức tinh gọn để theo dõi trạng thái của việc gửi form, bao gồm cả các trạng thái lỗi, trực tiếp trong các component React của bạn. Bài viết này cung cấp một hướng dẫn toàn diện để hiểu và sử dụng hiệu quả experimental_useFormStatus để xây dựng các form mạnh mẽ và thân thiện với người dùng.

Hiểu về sự cần thiết của experimental_useFormStatus

Theo truyền thống, việc quản lý việc gửi form trong React đòi hỏi một lượng lớn mã lặp đi lặp lại (boilerplate code). Các nhà phát triển phải theo dõi thủ công các trạng thái gửi (đang chờ, thành công, lỗi), xử lý thông báo lỗi và cập nhật giao diện người dùng tương ứng. Điều này có thể dẫn đến mã phức tạp và dễ xảy ra lỗi, đặc biệt là trong các form phức tạp với nhiều quy tắc xác thực và các hoạt động bất đồng bộ.

experimental_useFormStatus giải quyết thách thức này bằng cách cung cấp một cách thức tập trung và khai báo để quản lý trạng thái gửi form. Nó đơn giản hóa quá trình theo dõi lỗi, chỉ báo trạng thái tải và cung cấp phản hồi cho người dùng, dẫn đến mã sạch hơn, dễ bảo trì hơn và hiệu suất cao hơn.

experimental_useFormStatus là gì?

Hook experimental_useFormStatus là một hook của React được thiết kế đặc biệt để cung cấp thông tin về trạng thái của một lần gửi form. Nó hoạt động cùng với thuộc tính action của thẻ <form> và các server action (một tính năng tương đối mới khác của React). Khi một form có thuộc tính action trỏ đến một server action được gửi đi, experimental_useFormStatus sẽ cung cấp dữ liệu về trạng thái hiện tại của lần gửi đó.

Cụ thể, hook này trả về một đối tượng chứa các thuộc tính sau:

• pending: Một giá trị boolean cho biết liệu việc gửi form có đang được xử lý hay không.
• data: Dữ liệu đã được gửi bởi form.
• method: Phương thức HTTP được sử dụng để gửi form (ví dụ: "POST", "GET").
• action: Server action đã được kích hoạt bởi việc gửi form.
• error: Một đối tượng lỗi, nếu việc gửi form thất bại. Đối tượng này sẽ chứa thông tin về lỗi đã xảy ra trên máy chủ.

Cách sử dụng experimental_useFormStatus

Hãy cùng xem qua một ví dụ thực tế để minh họa cách sử dụng experimental_useFormStatus. Chúng ta sẽ tạo một form liên hệ đơn giản với các trường cho tên, email, và tin nhắn, và trình bày cách sử dụng hook để hiển thị chỉ báo tải và thông báo lỗi.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo bạn đã thiết lập một dự án React và đang sử dụng một phiên bản React hỗ trợ các tính năng thử nghiệm. Bạn có thể cần bật các tính năng thử nghiệm trong tệp react.config.js của mình (hoặc cấu hình tương đương cho công cụ build của bạn). Ngoài ra, hãy đảm bảo bạn có một backend (ví dụ: Node.js với Express) được cấu hình để xử lý việc gửi form và trả về các phản hồi thích hợp.

Ví dụ: Form Liên hệ

Đây là mã cho component React:

import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Gửi form thất bại');
    }

    // Xử lý khi gửi thành công (ví dụ: chuyển hướng, hiển thị thông báo thành công)
    console.log('Form đã được gửi thành công!');
    // Trong một ứng dụng thực tế, bạn có thể chuyển hướng hoặc cập nhật state ở đây
    return { success: true, message: 'Form đã được gửi thành công!' };

  } catch (error) {
    console.error('Lỗi khi gửi form:', error);
    return { success: false, message: error.message };
  }
}

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

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

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    

      

        Tên:
        
      
      

        Email:
        
      
      

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

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

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

<ol>
  <li><b>Import <code>useFormStatus</code>:</b> Chúng ta import hook <code>experimental_useFormStatus</code> từ <code>react-dom</code>. Hãy nhớ rằng đây là một tính năng thử nghiệm, vì vậy đường dẫn import có thể thay đổi trong các phiên bản React tương lai.</li>
  <li><b>Trạng thái Form:</b> Một biến trạng thái <code>formData</code> sử dụng <code>useState</code> để theo dõi tên, email và tin nhắn do người dùng nhập.</li>
  <li><b>Hook <code>useFormStatus</code>:</b> Chúng ta gọi <code>useFormStatus()</code> bên trong component. Hook này tự động cung cấp thông tin về trạng thái gửi của form khi form được gửi thông qua một server action.</li>
  <li><b>Truy cập các thuộc tính trạng thái:</b> Chúng ta trích xuất <code>pending</code>, <code>data</code>, và <code>error</code> từ đối tượng được trả về bởi <code>useFormStatus()</code>.</li>
  <li><b>Chỉ báo tải:</b> Chúng ta sử dụng giá trị boolean <code>pending</code> để hiển thị có điều kiện thông báo "Đang gửi..." trên nút gửi và vô hiệu hóa nút để ngăn chặn việc gửi nhiều lần.</li>
  <li><b>Xử lý lỗi:</b> Nếu có lỗi xảy ra trong quá trình gửi form (được chỉ báo bởi thuộc tính <code>error</code>), chúng ta sẽ hiển thị một thông báo lỗi cho người dùng.</li>
  <li><b>Thông báo thành công:</b> Nếu việc gửi thành công (được xác định bởi server action trả về { success: true, message: '...'}), chúng ta sẽ hiển thị một thông báo thành công.</li>
  <li><b>Server Action:</b> Hàm <code>handleSubmit</code> được đánh dấu bằng <code>'use server'</code>, biến nó thành một server action. Nó sử dụng <code>fetch</code> để gửi dữ liệu form đến một điểm cuối API (<code>/api/contact</code>).</li>
  <li><b>Xử lý lỗi trong Server Action:</b> Server action cố gắng xử lý lệnh gọi API và các lỗi tiềm ẩn. Nếu có lỗi trong phản hồi API hoặc một ngoại lệ, nó sẽ trả về <code>{ success: false, message: '...' }</code>. Thông báo này sau đó sẽ có sẵn trong thuộc tính <code>error</code> của hook <code>useFormStatus</code>.</li>
  <li><b>Thuộc tính Action:</b> Thuộc tính <code>action</code> của thẻ <code><form></code> được đặt thành server action <code>handleSubmit</code>. Điều này cho React biết sử dụng hàm này khi form được gửi.</li>
</ol>

<h3>Backend (Ví dụ đơn giản sử dụng Node.js và Express)</h3>

<p>Đây là một ví dụ rất cơ bản về server Node.js sử dụng Express để xử lý việc gửi form:</p>

<pre>
<code>
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/api/contact', (req, res) => {
  const { name, email, message } = req.body;

  // Mô phỏng việc xác thực hoặc xử lý phía máy chủ (ví dụ: gửi email)
  if (!name || !email || !message) {
    return res.status(400).json({ message: 'Tất cả các trường là bắt buộc.' });
  }

  if (!email.includes('@')) {
     return res.status(400).json({message: 'Định dạng email không hợp lệ.'});
  }

  // Mô phỏng một hoạt động thành công với độ trễ
  setTimeout(() => {
    console.log('Đã nhận dữ liệu form:', { name, email, message });
    res.status(200).json({ message: 'Form đã được gửi thành công!' });
  }, 1000);
});

app.listen(port, () => {
  console.log(`Server đang lắng nghe tại http://localhost:${port}`);
});
</code>
</pre>

<h3>Những lưu ý chính cho Backend:</h3>

<ul>
  <li><b>Xác thực (Validation):</b> Luôn thực hiện xác thực phía máy chủ để đảm bảo tính toàn vẹn và bảo mật dữ liệu.</li>
  <li><b>Xử lý lỗi:</b> Triển khai xử lý lỗi mạnh mẽ để bắt các sự cố không mong muốn và trả về thông báo lỗi có ý nghĩa cho máy khách.</li>
  <li><b>Bảo mật:</b> Làm sạch và xác thực tất cả dữ liệu đầu vào để ngăn chặn các lỗ hổng bảo mật như kịch bản chéo trang (XSS) và SQL injection.</li>
  <li><b>CORS:</b> Cấu hình Chia sẻ tài nguyên nguồn gốc chéo (CORS) một cách thích hợp để cho phép các yêu cầu từ miền của ứng dụng React của bạn.</li>
  <li><b>Phản hồi JSON:</b> Trả về phản hồi JSON cho máy khách với các mã trạng thái HTTP thích hợp (ví dụ: 200 cho thành công, 400 cho lỗi phía máy khách, 500 cho lỗi phía máy chủ).</li>
</ul>

<h2>Lợi ích của việc sử dụng <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Quản lý Form đơn giản hóa:</b> Quản lý tập trung trạng thái gửi form giúp giảm mã lặp đi lặp lại và cải thiện khả năng đọc mã.</li>
  <li><b>Cải thiện trải nghiệm người dùng:</b> Phản hồi theo thời gian thực về trạng thái gửi form (chỉ báo tải, thông báo lỗi) giúp tăng cường sự tương tác của người dùng và giảm bớt sự khó chịu.</li>
  <li><b>Tăng cường xử lý lỗi:</b> Dễ dàng truy cập thông tin lỗi chi tiết cho phép xử lý lỗi có mục tiêu hơn và cải thiện việc gỡ lỗi.</li>
  <li><b>Cách tiếp cận khai báo:</b> Hook này cung cấp một cách khai báo để quản lý trạng thái form, làm cho mã trở nên dễ đoán và dễ hiểu hơn.</li>
  <li><b>Tích hợp với Server Actions:</b> Tích hợp liền mạch với React Server Actions giúp đơn giản hóa việc tìm nạp và thay đổi dữ liệu, dẫn đến các ứng dụng hiệu quả và hiệu suất cao hơn.</li>
</ul>

<h2>Các trường hợp sử dụng nâng cao</h2>

<p>Ngoài ví dụ cơ bản, <code>experimental_useFormStatus</code> có thể được sử dụng trong các kịch bản phức tạp hơn:</p>

<h3>1. Xử lý nhiều Form trên một trang</h3>

<p>Nếu bạn có nhiều form trên một trang, mỗi form sẽ có một phiên bản <code>useFormStatus</code> riêng, cho phép bạn theo dõi trạng thái gửi của chúng một cách độc lập.</p>

<h3>2. Triển khai logic xác thực tùy chỉnh</h3>

<p>Bạn có thể tích hợp <code>useFormStatus</code> với logic xác thực tùy chỉnh để hiển thị lỗi xác thực trong thời gian thực. Ví dụ, bạn có thể sử dụng một thư viện xác thực như Yup hoặc Zod để xác thực dữ liệu form ở phía máy khách trước khi gửi lên máy chủ. Server action sau đó có thể trả về các lỗi xác thực dựa trên các quy tắc ở backend và được hiển thị bằng <code>useFormStatus</code>.</p>

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

<p>Bạn có thể sử dụng <code>useFormStatus</code> để triển khai cập nhật lạc quan, nơi bạn cập nhật giao diện người dùng ngay sau khi người dùng gửi form, giả định rằng việc gửi sẽ thành công. Nếu việc gửi thất bại, bạn có thể hoàn tác giao diện người dùng về trạng thái trước đó và hiển thị thông báo lỗi.</p>

<h3>4. Chỉ báo tiến trình cho việc tải tệp lên</h3>

<p>Mặc dù <code>useFormStatus</code> không trực tiếp cung cấp cập nhật tiến trình cho việc tải tệp lên, bạn có thể kết hợp nó với các kỹ thuật khác (ví dụ: sử dụng đối tượng <code>XMLHttpRequest</code> và sự kiện <code>upload.onprogress</code> của nó) để hiển thị chỉ báo tiến trình cho người dùng.</p>

<h2>Những cạm bẫy thường gặp và cách tránh</h2>

<ul>
  <li><b>Không sử dụng Server Actions:</b> <code>experimental_useFormStatus</code> được thiết kế chủ yếu để hoạt động với React Server Actions. Nếu bạn không sử dụng server actions, bạn sẽ cần phải quản lý thủ công trạng thái gửi form và cập nhật giao diện người dùng tương ứng, điều này làm mất đi mục đích của việc sử dụng hook.</li>
  <li><b>Xử lý lỗi không chính xác trên máy chủ:</b> Đảm bảo mã phía máy chủ của bạn xử lý lỗi một cách duyên dáng và trả về thông báo lỗi có ý nghĩa cho máy khách. Thuộc tính <code>error</code> của hook <code>useFormStatus</code> sẽ chỉ chứa thông tin về các lỗi xảy ra trên máy chủ.</li>
  <li><b>Bỏ qua các lỗ hổng bảo mật tiềm ẩn:</b> Luôn làm sạch và xác thực đầu vào của người dùng ở cả phía máy khách và phía máy chủ để ngăn chặn các lỗ hổng bảo mật.</li>
  <li><b>Không cung cấp phản hồi cho người dùng:</b> Việc cung cấp phản hồi rõ ràng và kịp thời cho người dùng về trạng thái gửi form (chỉ báo tải, thông báo lỗi, thông báo thành công) là rất quan trọng. Điều này nâng cao trải nghiệm người dùng và giảm bớt sự khó chịu.</li>
</ul>

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

<ul>
  <li><b>Sử dụng thông báo lỗi có ý nghĩa:</b> Cung cấp các thông báo lỗi rõ ràng và súc tích giúp người dùng hiểu điều gì đã sai và cách khắc phục.</li>
  <li><b>Triển khai xác thực phía máy khách:</b> Xác thực dữ liệu form ở phía máy khách trước khi gửi lên máy chủ để giảm các yêu cầu không cần thiết đến máy chủ và cải thiện trải nghiệm người dùng.</li>
  <li><b>Xử lý lỗi một cách duyên dáng:</b> Triển khai xử lý lỗi mạnh mẽ để bắt các sự cố không mong muốn và ngăn ứng dụng của bạn bị sập.</li>
  <li><b>Kiểm tra Form của bạn kỹ lưỡng:</b> Kiểm tra form của bạn với các đầu vào và kịch bản khác nhau để đảm bảo rằng chúng hoạt động chính xác và việc xử lý lỗi đang hoạt động như mong đợi.</li>
  <li><b>Giữ mã của bạn sạch sẽ và dễ đọc:</b> Sử dụng tên biến và nhận xét mô tả để làm cho mã của bạn dễ hiểu và bảo trì hơn.</li>
  <li><b>Ưu tiên khả năng tiếp cận (Accessibility):</b> Đảm bảo form của bạn có thể truy cập được cho tất cả người dùng, bao gồm cả những người khuyết tật. Sử dụng HTML ngữ nghĩa, cung cấp nhãn phù hợp cho các trường form và đảm bảo rằng các thông báo lỗi được hiển thị rõ ràng và dễ hiểu.</li>
</ul>

<h2>Những lưu ý về quốc tế hóa (Internationalization)</h2>

<p>Khi xây dựng form cho đối tượng toàn cầu, hãy xem xét các khía cạnh quốc tế hóa sau:</p>

<ul>
  <li><b>Bản địa hóa thông báo lỗi:</b> Đảm bảo rằng các thông báo lỗi được dịch sang ngôn ngữ ưa thích của người dùng. Bạn có thể sử dụng một thư viện bản địa hóa như <code>i18next</code> để quản lý các bản dịch.</li>
  <li><b>Định dạng ngày và số:</b> Sử dụng các định dạng ngày và số phù hợp dựa trên ngôn ngữ của người dùng.</li>
  <li><b>Định dạng địa chỉ:</b> Điều chỉnh các trường form địa chỉ để phù hợp với định dạng địa chỉ của các quốc gia khác nhau. Ví dụ, một số quốc gia sử dụng mã bưu chính trước tên thành phố, trong khi những quốc gia khác lại sử dụng sau.</li>
  <li><b>Xác thực số điện thoại:</b> Triển khai xác thực số điện thoại hỗ trợ các mã quốc gia và định dạng số điện thoại khác nhau.</li>
  <li><b>Bố cục từ phải sang trái (RTL):</b> Hỗ trợ bố cục RTL cho các ngôn ngữ như tiếng Ả Rập và tiếng Do Thái.</li>
</ul>

<p>Chẳng hạn, một form yêu cầu số điện thoại nên tự động điều chỉnh các quy tắc xác thực của nó tùy thuộc vào quốc gia được người dùng chọn. Một số điện thoại của Hoa Kỳ sẽ yêu cầu 10 chữ số, trong khi một số điện thoại của Vương quốc Anh có thể yêu cầu 11 chữ số bao gồm cả số không ở đầu. Tương tự, các thông báo lỗi như "Định dạng số điện thoại không hợp lệ" phải được dịch sang ngôn ngữ của người dùng.</p>

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

<p><code>experimental_useFormStatus</code> là một sự bổ sung giá trị cho bộ công cụ của React, cung cấp một cách thức tinh gọn và khai báo để quản lý trạng thái gửi form. Bằng cách tận dụng hook này, các nhà phát triển có thể xây dựng các form mạnh mẽ hơn, thân thiện với người dùng hơn và dễ bảo trì hơn. Vì tính năng này hiện đang trong giai đoạn thử nghiệm, hãy chắc chắn cập nhật tài liệu mới nhất của React và các phương pháp hay nhất của cộng đồng. Hãy nắm bắt công cụ mạnh mẽ này để nâng cao khả năng xử lý form của bạn và tạo ra những trải nghiệm người dùng đặc biệt cho các ứng dụng của bạn.</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">xử lý 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">xác thực 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">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">tính năng thử nghiệm</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">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">trạng thá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">trạng thái gửi dữ liệu</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>$RC("B:1","S:1")</script></body></html>