אימות אסינכרוני עם useFormStatus ב-React: עדכוני סטטוס טופס אסינכרוניים

בפיתוח ווב מודרני, טפסים הם רכיב חיוני לאינטראקציה עם המשתמש. הבטחת תקינות הנתונים ומתן משוב בזמן אמת הם בעלי חשיבות עליונה לחוויית משתמש חיובית. ה-hook useFormStatus של React, שהוצג ב-React 18, מציע דרך עוצמתית ואלגנטית לנהל את סטטוס שליחת טפסים, במיוחד כאשר מתמודדים עם אימות אסינכרוני. מאמר זה צולל לנבכי useFormStatus, מתמקד בתרחישי אימות אסינכרוניים, מספק דוגמאות מעשיות ומתווה שיטות עבודה מומלצות ליצירת טפסים חזקים וידידותיים למשתמש.

הבנת היסודות של useFormStatus

ה-hook useFormStatus מספק מידע על שליחת הטופס האחרונה שהופעלה על ידי או בתוך <form>. הוא מחזיר אובייקט עם המאפיינים הבאים:

• pending: ערך בוליאני המציין אם שליחת הטופס נמצאת כרגע בהמתנה.
• data: הנתונים המשויכים לשליחת הטופס, אם זמינים.
• method: מתודת ה-HTTP ששימשה לשליחת הטופס (למשל, 'get' או 'post').
• action: הפונקציה ששימשה כפעולת הטופס.

אף על פי שנראה פשוט, useFormStatus הופך לבעל ערך רב כאשר מתמודדים עם פעולות אסינכרוניות, כמו אימות קלט משתמש מול שרת מרוחק או ביצוע טרנספורמציות נתונים מורכבות לפני השליחה.

הצורך באימות אסינכרוני

אימות סינכרוני מסורתי, שבו הבדיקות מבוצעות באופן מיידי בתוך הדפדפן, לעיתים קרובות אינו מספיק ליישומים בעולם האמיתי. שקלו את התרחישים הבאים:

• זמינות שם משתמש: אימות אם שם משתמש כבר תפוס דורש בדיקה מול מסד נתונים.
• אימות דוא"ל: שליחת דוא"ל אימות ואישור תקינותו דורשים אינטראקציה בצד השרת.
• עיבוד תשלומים: אימות פרטי כרטיס אשראי כרוך בתקשורת עם ספק שירותי תשלום.
• השלמה אוטומטית של כתובת: הצעת אפשרויות כתובת בזמן שהמשתמש מקליד דורשת קריאה ל-API חיצוני.

תרחישים אלו כוללים מטבעם פעולות אסינכרוניות. useFormStatus, בשילוב עם פונקציות אסינכרוניות, מאפשר לנו לטפל באימותים אלה בחן, תוך מתן משוב מיידי למשתמש מבלי לחסום את ממשק המשתמש.

יישום אימות אסינכרוני עם useFormStatus

בואו נבחן דוגמה מעשית של אימות זמינות שם משתמש באופן אסינכרוני.

דוגמה: אימות שם משתמש אסינכרוני

ראשית, ניצור רכיב React פשוט עם טופס וכפתור שליחה.

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

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

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

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy