React useFormStatus Async Validering: Asynkrone formularstatusopdateringer

I moderne webudvikling er formularer et afgørende element for brugerinteraktion. At sikre datavaliditet og give feedback i realtid er altafgørende for en positiv brugeroplevelse. Reacts useFormStatus-hook, introduceret i React 18, tilbyder en kraftfuld og elegant måde at håndtere status for formularindsendelser, især når man arbejder med asynkron validering. Denne artikel dykker ned i finesserne ved useFormStatus, med fokus på asynkrone valideringsscenarier, giver praktiske eksempler og skitserer bedste praksis for at skabe robuste og brugervenlige formularer.

Forståelse af det grundlæggende i useFormStatus

useFormStatus-hooket giver information om den seneste formularindsendelse, der udløste en eller inden i en <form>. Det returnerer et objekt med følgende egenskaber:

• pending: En boolean, der angiver, om formularindsendelsen er i gang.
• data: Dataene forbundet med formularindsendelsen, hvis tilgængelige.
• method: HTTP-metoden, der blev brugt til formularindsendelsen (f.eks. 'get' eller 'post').
• action: Funktionen, der blev brugt som formularens handling.

Selvom det virker simpelt, bliver useFormStatus utroligt værdifuldt, når man håndterer asynkrone operationer, såsom at validere brugerinput mod en fjernserver eller udføre komplekse datatransformationer før indsendelse.

Behovet for asynkron validering

Traditionel synkron validering, hvor tjek udføres øjeblikkeligt i browseren, er ofte utilstrækkelig til virkelige applikationer. Overvej disse scenarier:

• Brugernavns tilgængelighed: At verificere, om et brugernavn allerede er taget, kræver et opslag i en database.
• E-mailbekræftelse: At sende en bekræftelses-e-mail og bekræfte dens gyldighed kræver interaktion på serversiden.
• Betalingsbehandling: At validere kreditkortoplysninger involverer kommunikation med en betalingsgateway.
• Adresse-autoudfyldning: At foreslå adressemuligheder, mens brugeren skriver, kræver kald til et eksternt API.

Disse scenarier involverer i sagens natur asynkrone operationer. useFormStatus, i kombination med asynkrone funktioner, giver os mulighed for at håndtere disse valideringer elegant og give øjeblikkelig feedback til brugeren uden at blokere brugergrænsefladen.

Implementering af asynkron validering med useFormStatus

Lad os udforske et praktisk eksempel på validering af et brugernavns tilgængelighed asynkront.

Eksempel: Asynkron validering af brugernavn

Først opretter vi en simpel React-komponent med en formular og en submit-knap.

            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');

    // Simuler et API-kald for at tjekke brugernavns tilgængelighed
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simuler netværksforsinkelse

    const isAvailable = username !== 'taken'; // Mock tilgængelighedstjek

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

    console.log('Username is available!');
    // Udfør den faktiske formularindsendelse her
  }

  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