React useFormStatus: Põhjalik juhend vormide olekuhalduseks

React 18-s tutvustatud useFormStatus hook pakub võimsat ja tõhusat viisi vormide saatmisoleku haldamiseks Reacti serverikomponentides. See hook on spetsiaalselt loodud töötama serveri tegevustega (server actions), pakkudes sujuvat integratsiooni vormide saatmise käsitlemiseks otse serveris. See lihtsustab vormi saatmise oleku jälgimise protsessi, pakkudes väärtuslikku teavet, näiteks kas vorm on ootel, on õnnestunud või on ilmnenud viga. See juhend uurib useFormStatus konksu võimekust, selle eeliseid ja praktilisi näiteid, mis demonstreerivad selle kasutamist erinevates stsenaariumides.

Serveri tegevuste ja useFormStatus konksu mõistmine

Enne useFormStatus konksu süvenemist on oluline mõista Reacti serverikomponente ja serveri tegevusi. Serveri tegevused võimaldavad teil määratleda funktsioone, mis käivitatakse serveris ja on otse juurdepääsetavad teie Reacti komponentidest. See võimaldab käsitleda vormide saatmist, andmete toomist ja muid serveripoolseid toiminguid ilma eraldi API otspunkti vajaduseta.

Seejärel pakub useFormStatus hook ülevaadet nende serveri tegevuste täitmisest, mille on käivitanud vormide saatmised.

Mis on useFormStatus?

useFormStatus on Reacti hook, mis tagastab objekti, mis sisaldab teavet kõige viimase vormi saatmise oleku kohta. See teave sisaldab:

• pending: Boole'i väärtus, mis näitab, kas vormi saadetakse praegu.
• data: Saatmise seotud FormData objekt.
• method: Saatmiseks kasutatud HTTP meetod (tavaliselt 'POST').
• action: Käivitatud serveri tegevuse funktsioon.

useFormStatus konksu kasutamise eelised

useFormStatus konksu kasutamine pakub mitmeid olulisi eeliseid:

• Lihtsustatud olekuhaldus: Kaob vajadus käsitsi olekuhalduse järele vormi saatmisoleku jälgimiseks. Hook uuendab ennast automaatselt saatmise edenedes.
• Parem kasutajakogemus: Annab kasutajatele reaalajas tagasisidet, näiteks kuvades laadimisindikaatoreid vormi töötlemise ajal või näidates veateateid ebaõnnestumise korral.
• Puhas kood: Edendab deklaratiivsemat ja hooldatavamat koodibaasi, eraldades vormi saatmise loogika komponendi renderdamisest.
• Sujuv integratsioon serveri tegevustega: Loodud töötama ideaalselt koos serveri tegevustega, muutes vormide saatmise otse serveris käsitlemise lihtsaks.

useFormStatus konksu praktilised näited

Uurime mitmeid praktilisi näiteid, et illustreerida useFormStatus konksu kasutamist erinevates stsenaariumides.

Põhiline vormi saatmine koos laadimisindikaatoriga

See näide demonstreerib lihtsat vormi laadimisindikaatoriga, mis kuvatakse vormi saatmise ajal.

Serveri tegevus (actions.js):

'use server'

export async function submitForm(formData) {
  // Simuleerime viivitust laadimisoleku demonstreerimiseks
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  console.log('Form submitted with name:', name);
  return { message: `Form submitted successfully with name: ${name}` };
}

Reacti komponent (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'

function FormComponent() {
  const { pending } = useFormStatus()

  return (
    

      Nimi:
      
      
        {pending ? 'Saadan...' : 'Saada'}
      
    
  )
}

export default FormComponent

Selles näites kasutatakse useFormStatus konksust saadud pending omadust sisestusvälja ja nupu keelamiseks vormi saatmise ajal ning "Saadan..." teate kuvamiseks.

Edu- ja veaolukordade käsitlemine

See näide demonstreerib, kuidas käsitleda edu- ja veaolukordi pärast vormi saatmist.

Serveri tegevus (actions.js):

'use server'

export async function submitForm(formData) {
  // Simuleerime viivitust
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    throw new Error('Nimi on kohustuslik');
  }

  console.log('Form submitted with name:', name);
  return { message: `Vorm edukalt saadetud nimega: ${name}` };
}

Reacti komponent (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await submitForm(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Nimi:
      
      
        {pending ? 'Saadan...' : 'Saada'}
      
      {pending && 
Saadan...
}
      {message && 
{message}
}
      {error && 
Viga: {error}
}
    
  )
}

export default FormComponent

Selles näites kasutatakse handleSubmit funktsioonis try/catch plokki. Kui serveri tegevus viskab vea, püütakse see kinni ja kuvatakse kasutajale. Edukas saatmisel kuvatakse eduteade.

FormData kasutamine keerukate andmete jaoks

useFormStatus töötab sujuvalt koos FormData-ga, võimaldades teil hõlpsasti käsitleda keerukaid andmestruktuure. Siin on näide, mis demonstreerib failide üleslaadimist.

Serveri tegevus (actions.js):

'use server'

export async function uploadFile(formData) {
  // Simuleerime faili töötlemist
  await new Promise(resolve => setTimeout(resolve, 2000));

  const file = formData.get('file');

  if (!file) {
    throw new Error('Faili ei laaditud üles');
  }

  console.log('File uploaded:', file.name);
  return { message: `Fail edukalt üles laaditud: ${file.name}` };
}

Reacti komponent (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { uploadFile } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await uploadFile(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Laadi fail üles:
      
      
        {pending ? 'Laadin üles...' : 'Laadi üles'}
      
      {pending && 
Laadin üles...
}
      {message && 
{message}
}
      {error && 
Viga: {error}
}
    
  )
}

export default FormComponent

See näide demonstreerib failide üleslaadimise käsitlemist FormData abil. Serveri tegevus hangib faili FormData objektist ja töötleb seda. useFormStatus hook haldab laadimisolekut faili üleslaadimise ajal.

Parimad praktikad useFormStatus konksu kasutamiseks

useFormStatus konksu eeliste maksimeerimiseks kaaluge neid parimaid praktikaid:

• Andke selget kasutajale tagasisidet: Kasutage pending olekut informatiivsete laadimisindikaatorite kuvamiseks ja vormielementide keelamiseks, et vältida mitmekordseid saatmisi.
• Käsitlege vigu sujuvalt: Rakendage veakäsitlust, et püüda kinni erandid oma serveri tegevustes ja kuvada kasutajasõbralikke veateateid.
• Valideerige andmeid serveris: Tehke serveripoolne valideerimine andmete terviklikkuse ja turvalisuse tagamiseks.
• Hoidke serveri tegevused lühikesed: Keskenduge serveri tegevustes konkreetsetele ülesannetele, et parandada jõudlust ja hooldatavust.
• Kaaluge juurdepääsetavust: Veenduge, et teie vormid on juurdepääsetavad, pakkudes korrektseid silte, ARIA atribuute ja klaviatuuriga navigeerimise tuge.

Täpsemad kasutusjuhud

Lisaks põhinäidetele saab useFormStatus konksu kasutada keerukamates stsenaariumides:

• Progressiivne täiustamine: Kasutage serveri tegevusi ja useFormStatus konksu oma vormide progressiivseks täiustamiseks, pakkudes põhikogemust kasutajatele, kellel on JavaScript keelatud, ja rikkalikumat kogemust neile, kellel on JavaScript lubatud.
• Optimistlikud uuendused: Rakendage optimistlikke uuendusi, uuendades kasutajaliidest kohe pärast vormi saatmist, eeldades, et saatmine õnnestub. Tühistage uuendus, kui saatmine ebaõnnestub.
• Vormiteekide integreerimine: Integreerige useFormStatus populaarsete vormiteekidega nagu Formik või React Hook Form, et hallata vormi olekut ja valideerimist. Kuigi neil teekidel on sageli oma olekuhaldus, võib useFormStatus olla kasulik lõpliku saatmisfaasi jaoks serveri tegevusele.

Rahvusvahelistamise (i18n) kaalutlused

Globaalsele publikule vormide loomisel on rahvusvahelistamine (i18n) ülioluline. Siin on, kuidas arvestada i18n-ga useFormStatus konksu kasutamisel:

• Lokaliseeritud veateated: Veenduge, et kasutajale kuvatavad veateated on lokaliseeritud nende eelistatud keelde. Seda saab saavutada, salvestades veateateid tõlkefailidesse ja kasutades teeki nagu react-intl või i18next sobiva tõlke hankimiseks.
• Kuupäeva ja numbri vormindamine: Käsitsege kuupäeva ja numbri vormindamist vastavalt kasutaja lokaadile. Kasutage nende väärtuste korrektseks vormindamiseks teeke nagu Intl.DateTimeFormat ja Intl.NumberFormat.
• Paremalt vasakule (RTL) tugi: Kui teie rakendus toetab keeli, mida kirjutatakse paremalt vasakule (nt araabia, heebrea), veenduge, et teie vormid on RTL paigutuste jaoks õigesti stiilitud.
• Vormi valideerimine: Kohandage vormi valideerimisreegleid erinevatele lokaatidele. Näiteks telefoninumbri valideerimine võib riigiti oluliselt erineda.

Lokaliseeritud veateadete näide:

// tõlked/et.json
{
  "form.error.nameRequired": "Palun sisestage oma nimi.",
  "form.success.submission": "Täname teid saatmise eest!"
}

// tõlked/de.json
{
  "form.error.nameRequired": "Bitte geben Sie Ihren Namen ein.",
  "form.success.submission": "Vielen Dank für Ihre Einreichung!"
}

// Komponent, mis kasutab react-intl
import { useIntl } from 'react-intl';

function FormComponent() {
  const intl = useIntl();
  const [error, setError] = useState(null);

  // ...

  catch (e) {
    setError(intl.formatMessage({ id: 'form.error.nameRequired' }));
  }
}

Juurdepääsetavuse kaalutlused

Juurdepääsetavus on kaasavate veebirakenduste loomise oluline aspekt. Siin on mitu juurdepääsetavuse kaalutlust, mida meeles pidada useFormStatus konksu kasutamisel:

• ARIA atribuudid: Kasutage ARIA atribuute, et pakkuda abistavatele tehnoloogiatele teavet vormi oleku kohta. Näiteks kasutage aria-busy="true" saatmisnupul, kui vorm on ootel.
• Sildid: Veenduge, et kõigil vormiväljadel on selged ja kirjeldavad sildid, mis on seotud sisestuselementidega, kasutades <label> elementi.
• Veateated: Kuvage veateateid viisil, mis on puuetega kasutajatele kergesti märgatav ja arusaadav. Kasutage ARIA atribuute nagu aria-live="assertive", et teavitada ekraanilugejaid veateadetest.
• Klaviatuuriga navigeerimine: Veenduge, et kasutajad saavad vormis navigeerida ainult klaviatuuri abil. Kasutage tabindex atribuuti, et kontrollida elementide fookuse saamise järjekorda.
• Värvikontrast: Veenduge, et vormis kasutatavatel teksti- ja taustavärvidel on piisav kontrast, et need oleksid nägemispuudega kasutajatele kergesti loetavad.

useFormStatus vs. traditsiooniline olekuhaldus

Traditsiooniliselt on Reacti arendajad hallanud vormide saatmisolekut, kasutades komponendi olekut (useState) või keerukamaid olekuhaldusteeke (nt Redux, Zustand). Siin on võrdlus nende lähenemiste ja useFormStatus konksu vahel:

Omadus	useFormStatus	useState	Väline olekuhaldus
Keerukus	Madal	Keskmine	Kõrge
Integratsioon serveri tegevustega	Sujuv	Nõuab käsitsi integreerimist	Nõuab käsitsi integreerimist
Põhjakood (Boilerplate)	Minimaalne	Mõõdukas	Märkimisväärne
Sobivad kasutusjuhud	Vormid, mis saadetakse otse serveri tegevustele	Lihtsad vormid piiratud olekuga	Keerukad vormid jagatud olekuga komponentide vahel

useFormStatus hiilgab siis, kui teie vormid suhtlevad otse Reacti serveri tegevustega. See vähendab põhjakoodi ja lihtsustab protsessi. Kuid väga keerukate vormide puhul, mille olekut jagatakse mitme komponendi vahel, võib täisväärtuslik olekuhaldusteek siiski õigustatud olla.

Levinud probleemide tõrkeotsing

Siin on mõned levinud probleemid, millega võite useFormStatus konksu kasutamisel kokku puutuda, ja kuidas neid lahendada:

• useFormStatus ei uuene:
  • Veenduge, et kasutate useFormStatus konksu <form> elemendi sees, mille action prop on seatud serveri tegevusele.
  • Kontrollige, kas serveri tegevus on korrektselt määratletud ja eksporditud.
  • Kontrollige serveri tegevuses vigu, mis võivad takistada selle edukat lõpuleviimist.
• Veateateid ei kuvata:
  • Veenduge, et püüate oma serveri tegevuses vead korrektselt kinni ja tagastate veateate.
  • Kontrollige, kas kuvate veateate oma komponendis, kasutades error olekut.
• Laadimisindikaator ei ilmu:
  • Veenduge, et kasutate pending olekut useFormStatus konksust laadimisindikaatori tingimuslikuks kuvamiseks.
  • Kontrollige, kas serveri tegevus võtab tegelikult aega (nt simuleerides viivitust).

Kokkuvõte

useFormStatus pakub puhast ja tõhusat viisi vormide saatmisoleku haldamiseks Reacti rakendustes, mis kasutavad serverikomponente. Selle konksu abil saate oma koodi lihtsustada, parandada kasutajakogemust ja sujuvalt integreeruda serveri tegevustega. See juhend on käsitlenud useFormStatus konksu põhitõdesid, pakkunud praktilisi näiteid ja arutanud parimaid praktikaid selle tõhusaks kasutamiseks. Lisades useFormStatus oma Reacti projektidesse, saate oma vormikäsitlust sujuvamaks muuta ning ehitada vastupidavamaid ja kasutajasõbralikumaid rakendusi globaalsele publikule.