29. august 2025Eesti

Õppige kasutama Reacti useFormStatus hook'i sujuvaks vormi esitamise haldamiseks, edenemise jälgimiseks ja parema kasutajakogemuse loomiseks.

React useFormStatus: Põhjalik Juhend Vormi Esitamise Olekust ja Edenemise Jälgimisest

Vormid on lugematute veebirakenduste selgroog, olles peamine liides kasutajate interaktsiooniks. Siiski võib vormide esitamise haldamine, vigade käsitlemine ja kasutajatele tagasiside andmine olla keeruline ülesanne. Reacti useFormStatus hook lihtsustab seda protsessi, pakkudes sujuvamat viisi vormi esitamise oleku jälgimiseks ja intuitiivsema kasutajakogemuse loomiseks.

Mis on `useFormStatus`?

React 18-s tutvustatud useFormStatus on hook, mis on loodud pakkuma teavet <form> elemendi esitamise oleku kohta. See võimaldab teil kindlaks teha, kas vormi esitatakse hetkel, kas see on edukalt esitatud või kas esitamisel ilmnes viga. Seda teavet saab kasutada kasutajaliidese värskendamiseks, nuppude keelamiseks, laadimisindikaatorite kuvamiseks või kasutajale veateadete edastamiseks.

`useFormStatus`-i Kasutamise Peamised Eelised:

Lihtsustatud Vormi Oleku Haldamine: Kaotab vajaduse vormi esitamise oleku käsitsi haldamiseks, vähendades korduvkoodi.
Parem Kasutajakogemus: Annab kasutajatele reaalajas tagasisidet vormi esitamise ajal, parandades kasutatavust.
Täiustatud Ligipääsetavus: Võimaldab ligipääsetavaid vormiinteraktsioone, keelates vormielemendid esitamise ajal ja pakkudes selgeid veateateid.
Optimeeritud Jõudlus: Jälgib tõhusalt vormi esitamise olekut, vältides tarbetuid uuesti renderdamisi.

Kuidas `useFormStatus` Töötab

useFormStatus hook'i kasutatakse Reacti komponendis, mis renderdab <form> elementi. Hook tagastab objekti, mis sisaldab järgmisi omadusi:

pending: Kahendmuutuja, mis näitab, kas vormi esitatakse hetkel.
data: Andmed, mille vormi tegevusfunktsioon tagastab (eduka esitamise korral).
method: HTTP meetod, mida kasutati vormi esitamiseks (nt "POST", "GET").
action: Funktsioon, mis kutsuti välja vormi esitamisel.
error: Veaobjekt, kui vormi esitamine ebaõnnestus.

useFormStatus-i kasutamiseks peate esmalt oma vormile määrama action funktsiooni. See funktsioon kutsutakse välja, kui vorm esitatakse. action funktsiooni sees saate teostada vajalikke andmetöötlusi, valideerimisi või API-kutseid. action funktsioon peaks tagastama väärtuse, mis on saadaval useFormStatus hook'i data omaduses. Kui tegevus viskab vea, on see viga saadaval error omaduses.

`useFormStatus`-i Praktilised Näited

Näide 1: Vormi Esitamise Põhiline Jälgimine

See näide demonstreerib, kuidas kasutada useFormStatus-i lihtsa kontaktivormi esitamise oleku jälgimiseks. See näide töötab React Server Component'is (RSC), mis nõuab raamistikku nagu Next.js või Remix.


// app/contact/page.tsx (Next.js)
'use client';

import { useFormStatus } from 'react-dom';

async function submitForm(formData: FormData) {
  "use server";
  // Simuleerime API-kutset
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name || !email || !message) {
    throw new Error('Palun täitke kõik väljad.');
  }

  console.log('Vormi andmed:', { name, email, message });
  return { message: 'Vorm edukalt esitatud!' };
}

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

  return (
    
      Nimi:
      


      E-post:
      


      Sõnum:
      


      

      {data && {data.message}}
      {error && Viga: {error.message}}
    
  );
}

Selles näites kasutatakse pending olekut vormi sisendite ja esitamisnupu keelamiseks vormi esitamise ajal. Samuti muudab see dünaamiliselt nupu teksti "Esitan...", et anda kasutajale visuaalset tagasisidet. Eduka esitamise korral kuvatakse submitForm tegevuse data. Kui esitamisel tekib viga, kuvatakse kasutajale error teade.

Näide 2: Laadimisindikaatori Kuvamine

See näide demonstreerib, kuidas kuvada laadimisindikaatorit vormi esitamise ajal. See on eriti kasulik vormide puhul, mis hõlmavad pikki API-kutseid või keerulist andmetöötlust.


// Sarnane komponendi struktuur nagu näites 1
export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      {/* ... vormi sisendid ... */}

      

      {pending && Laadin...} {/* Kuva laadimisindikaator */}

      {data && {data.message}}
      {error && Viga: {error.message}}
    
  );
}

Selles näites kuvatakse lihtne "Laadin..." teade, kui pending olek on tõene. Selle saate asendada keerukama laadimisindikaatoriga, näiteks spinneri või edenemisribaga.

Näide 3: Vormi Valideerimisvigade Käsitlemine

See näide demonstreerib, kuidas käsitleda vormi valideerimisvigu useFormStatus-i abil. action funktsioon teostab valideerimise ja viskab vea, kui mõni valideerimisreegel on rikutud.


// Sarnane komponendi struktuur nagu näites 1
async function submitForm(formData: FormData) {
  "use server";
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name) {
    throw new Error('Nimi on kohustuslik.');
  }
  if (!email) {
    throw new Error('E-post on kohustuslik.');
  }
  if (!message) {
    throw new Error('Sõnum on kohustuslik.');
  }

  // Simuleerime API-kutset
  await new Promise((resolve) => setTimeout(resolve, 2000));

  console.log('Vormi andmed:', { name, email, message });
  return { message: 'Vorm edukalt esitatud!' };
}

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

  return (
    
      {/* ... vormi sisendid ... */}

      

      {error && Viga: {error.message}} {/* Kuva veateade */}
    
  );
}

Selles näites kontrollib action funktsioon, kas nime, e-posti ja sõnumi väljad on tühjad. Kui mõni neist väljadest on tühi, viskab see vea vastava teatega. useFormStatus hook'i error omadust kasutatakse seejärel veateate kuvamiseks kasutajale.

Täpsemad Kasutusjuhud ja Kaalutlused

Integreerimine Kolmandate Osapoolte Vormiteekidega

Kuigi useFormStatus pakub natiivset lahendust vormi esitamise oleku jälgimiseks, saab seda integreerida ka kolmandate osapoolte vormiteekidega nagu Formik või React Hook Form. Need teegid pakuvad täpsemaid funktsioone nagu vormi valideerimine, väljade haldamine ja oleku haldamine. Kombineerides useFormStatus-i nende teekidega, saate luua väga kohandatavaid ja vastupidavaid vorme.

Formiku või React Hook Formiga integreerimiseks saate kasutada nende vastavaid vormi esitamise käitlejaid ja kasutada useFormStatus-i üldise esitamise oleku jälgimiseks. Tõenäoliselt peate ikkagi looma Server Action'i, kuid kliendipoolset vormi oleku haldamist teostaks valitud teek.

Asünkroonsete Operatsioonide Käsitlemine

Paljud vormid hõlmavad asünkroonseid operatsioone, nagu API-kutsed või andmebaasipäringud. Asünkroonsete operatsioonidega tegelemisel on oluline tagada, et vormi esitamine käsitletaks korrektselt ja et kasutajale antaks asjakohast tagasisidet. useFormStatus hook lihtsustab seda protsessi, pakkudes pending olekut, mida saab kasutada näitamaks, et vorm ootab asünkroonse operatsiooni lõpuleviimist.

Samuti on ülioluline rakendada vastupidav veakäsitlus, et graatsiliselt käsitleda kõiki vigu, mis võivad asünkroonsete operatsioonide käigus tekkida. useFormStatus hook'i error omadust saab kasutada kasutajale veateadete kuvamiseks.

Ligipääsetavuse Kaalutlused

Ligipääsetavus on veebiarenduse kriitiline aspekt ja vormid ei ole erand. Vormide loomisel on oluline tagada, et need oleksid ligipääsetavad puuetega kasutajatele. useFormStatus hook'i saab kasutada vormide ligipääsetavuse parandamiseks järgmiselt:

Vormielementide keelamine esitamise ajal: See takistab kasutajatel vormi kogemata mitu korda esitamast.
Selgete veateadete pakkumine: Veateated peaksid olema lühikesed, informatiivsed ja kergesti mõistetavad. Need peaksid olema seotud ka vastavate vormiväljadega, kasutades ARIA atribuute.
ARIA atribuutide kasutamine: ARIA atribuute saab kasutada abistavatele tehnoloogiatele lisateabe andmiseks vormi ja selle elementide kohta. Näiteks saab aria-describedby atribuuti kasutada veateadete seostamiseks vormiväljadega.

Jõudluse Optimeerimine

Kuigi useFormStatus on üldiselt tõhus, on oluline arvestada jõudluse mõjudega keerukate vormide loomisel. Vältige kulukate arvutuste või API-kutsete tegemist komponendis, mis kasutab useFormStatus-i. Selle asemel delegeerige need ülesanded action funktsioonile.

Samuti olge teadlik tarbetutest uuesti renderdamistest. Kasutage Reacti memoiseerimistehnikaid (nt React.memo, useMemo, useCallback), et vältida komponentide uuesti renderdamist, kui nende propsid pole muutunud.

Parimad Praktikad `useFormStatus`-i Kasutamiseks

Hoidke oma action funktsioonid lühikesed ja fokusseeritud: action funktsioon peaks peamiselt tegelema andmetöötluse, valideerimise ja API-kutsetega. Vältige keeruliste kasutajaliidese uuenduste või muude kõrvalmõjude teostamist action funktsiooni sees.
Andke kasutajatele selget ja informatiivset tagasisidet: Kasutage useFormStatus hook'i pending, data ja error omadusi, et anda kasutajatele reaalajas tagasisidet vormi esitamise ajal.
Rakendage vastupidav veakäsitlus: Käsitsege graatsiliselt kõiki vigu, mis võivad vormi esitamise käigus tekkida, ja andke kasutajale informatiivseid veateateid.
Arvestage ligipääsetavusega: Tagage, et teie vormid on puuetega kasutajatele ligipääsetavad, järgides ligipääsetavuse parimaid praktikaid.
Optimeerige jõudlust: Vältige tarbetuid uuesti renderdamisi ja kulukaid arvutusi komponendis, mis kasutab useFormStatus-i.

Reaalse Maailma Rakendused ja Näited Üle Maailma

useFormStatus hook'i saab rakendada erinevatele vormipõhistele stsenaariumidele erinevates tööstusharudes ja geograafilistes asukohtades. Siin on mõned näited:

E-kaubandus (Globaalne): Veebipood saab kasutada useFormStatus-i tellimusvormide esitamise jälgimiseks. pending olekut saab kasutada nupu "Esita tellimus" keelamiseks tellimuse töötlemise ajal ja error olekut saab kasutada veateadete kuvamiseks, kui tellimuse esitamine ebaõnnestub (nt makseprobleemide või laoseisu puudumise tõttu).
Tervishoid (Euroopa): Tervishoiuteenuse osutaja saab kasutada useFormStatus-i patsiendi registreerimisvormide esitamise jälgimiseks. pending olekut saab kasutada laadimisindikaatori kuvamiseks patsiendi andmete töötlemise ajal ja data olekut saab kasutada kinnitusteate kuvamiseks eduka registreerimise korral. Vastavus GDPR-ile (isikuandmete kaitse üldmäärus) on ülimalt oluline ning andmekaitse rikkumistega seotud veateateid tuleb hoolikalt käsitleda.
Haridus (Aasia): E-õppe platvorm saab kasutada useFormStatus-i ülesannete üleslaadimiste esitamise jälgimiseks. pending olekut saab kasutada nupu "Esita" keelamiseks ülesande üleslaadimise ajal ja error olekut saab kasutada veateadete kuvamiseks, kui üleslaadimine ebaõnnestub (nt faili suuruse piirangute või võrguprobleemide tõttu). Erinevates riikides võivad olla erinevad akadeemilised standardid ja esitamisnõuded, mida vorm peab arvestama.
Finantsteenused (Põhja-Ameerika): Pank saab kasutada useFormStatus-i laenutaotlusvormide esitamise jälgimiseks. pending olekut saab kasutada laadimisindikaatori kuvamiseks taotluse töötlemise ajal ja data olekut saab kasutada laenu heakskiidu staatuse kuvamiseks. Vastavus finantsregulatsioonidele (nt KYC - tunne oma klienti) on ülioluline ning vastavusprobleemidega seotud veateated peavad olema selged ja konkreetsed.
Valitsusteenused (Lõuna-Ameerika): Valitsusasutus saab kasutada useFormStatus-i kodanike tagasisidevormide esitamise jälgimiseks. pending olekut saab kasutada nupu "Esita" keelamiseks tagasiside töötlemise ajal ja data olekut saab kasutada kinnitusteate kuvamiseks eduka esitamise korral. Ligipääsetavus on kriitiline, kuna kodanikel võib olla erinev digitaalse kirjaoskuse tase ja juurdepääs tehnoloogiale. Vorm peab olema saadaval mitmes keeles.

Levinud Probleemide Tõrkeotsing

useFormStatus ei uuene: Veenduge, et kasutate React 18 või uuemat versiooni ja et teie vormil on korrektselt määratletud action. Kontrollige, et teie Server Action on korrektselt määratletud, kasutades "use server" direktiivi.
Veateateid ei kuvata: Kontrollige hoolikalt, et teie action funktsioon viskab vigu korrektselt ja et kuvate oma komponendis error.message. Kontrollige konsoolist võimalikke vigu vormi esitamise ajal.
Vormi esitatakse mitu korda: Veenduge, et teie esitamisnupp on keelatud, kasutades pending olekut, et vältida juhuslikke topeltklõpse.

Kokkuvõte

Reacti useFormStatus hook pakub võimsat ja mugavat viisi vormi esitamise oleku jälgimiseks ja parema kasutajakogemuse pakkumiseks. Lihtsustades vormi oleku haldamist, parandades ligipääsetavust ja optimeerides jõudlust, annab useFormStatus arendajatele võimaluse luua vastupidavaid ja kasutajasõbralikke vorme. Mõistes selle võimekust ja parimaid praktikaid, saate useFormStatus-i abil luua oma Reacti rakendustes sujuvaid ja kaasahaaravaid vormiinteraktsioone.