React useFormStatus asünkroonne valideerimine: Vormi staatuse asünkroonsed uuendused

Kaasaegses veebiarenduses on vormid kasutajate suhtluse oluline element. Andmete kehtivuse tagamine ja reaalajas tagasiside pakkumine on positiivse kasutajakogemuse jaoks üliolulised. Reacti useFormStatus hook, mis tutvustati React 18-s, pakub võimsat ja elegantset viisi vormide esitamise staatuse haldamiseks, eriti asünkroonse valideerimisega tegelemisel. See artikkel süveneb useFormStatus konksu üksikasjadesse, keskendudes asünkroonse valideerimise stsenaariumidele, pakkudes praktilisi näiteid ja kirjeldades parimaid tavasid robustsete ja kasutajasõbralike vormide loomiseks.

useFormStatus'i põhitõdede mõistmine

useFormStatus hook annab teavet viimase vormi esitamise kohta, mille käivitas või <form> sees. See tagastab objekti järgmiste omadustega:

• pending: Tõeväärtus, mis näitab, kas vormi esitamine on hetkel ootel.
• data: Vormi esitamisega seotud andmed, kui need on saadaval.
• method: Vormi esitamiseks kasutatud HTTP meetod (nt 'get' või 'post').
• action: Vormi tegevusena kasutatud funktsioon.

Kuigi pealtnäha lihtne, muutub useFormStatus uskumatult väärtuslikuks asünkroonsete toimingute puhul, nagu kasutaja sisendi valideerimine kaugserveri vastu või keerukate andmete teisendamine enne esitamist.

Asünkroonse valideerimise vajadus

Traditsiooniline sünkroonne valideerimine, kus kontrolle teostatakse kohe brauseris, on reaalsete rakenduste jaoks sageli ebapiisav. Mõelge järgmistele stsenaariumidele:

• Kasutajanime saadavus: Kontrollimine, kas kasutajanimi on juba võetud, nõuab andmebaasipäringut.
• E-posti kinnitamine: Kinnituskirja saatmine ja selle kehtivuse kinnitamine nõuab serveripoolset suhtlust.
• Maksete töötlemine: Krediitkaardi andmete valideerimine hõlmab suhtlust makseväravaga.
• Aadressi automaatne täitmine: Aadressivalikute soovitamine kasutaja tippimise ajal nõuab välise API kutsumist.

Need stsenaariumid hõlmavad oma olemuselt asünkroonseid toiminguid. useFormStatus koos asünkroonsete funktsioonidega võimaldab meil neid valideerimisi sujuvalt käsitleda, pakkudes kasutajale kohest tagasisidet ilma kasutajaliidest blokeerimata.

Asünkroonse valideerimise rakendamine useFormStatus'iga

Uurime praktilist näidet kasutajanime saadavuse asünkroonsest valideerimisest.

Näide: Asünkroonne kasutajanime valideerimine

Esmalt loome lihtsa Reacti komponendi vormi ja esitamisnupuga.

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

    // Simuleerime API-kutset kasutajanime saadavuse kontrollimiseks
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simuleerime võrgu latentsust

    const isAvailable = username !== 'taken'; // Saadavuse kontrolli imiteerimine

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

    console.log('Username is available!');
    // Teosta tegelik vormi esitamine siin
  }

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

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

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

export default UsernameForm;

            

              

Copy