React useFormState: Lõplik juhend kaasaegseks vormihalduseks

Pidevalt arenevas veebiarenduse maailmas on vormide oleku haldamine alati olnud keskne väljakutse. Alates lihtsatest kontaktivormidest kuni keerukate mitmeastmeliste viisarditeni on arendajad otsinud mustreid, mis oleksid vastupidavad, kasutajasõbralikud ja hooldatavad. React Server Components'i ja Server Actions'ite tulekuga on paradigma taas muutumas. Tutvustame hook'i `useFormState` – võimas tööriist, mis on loodud ületama lõhet kliendipoolsete kasutaja interaktsioonide ja serveripoolse andmetöötluse vahel, luues sujuvama ja integreerituma kogemuse.

See põhjalik juhend on mõeldud globaalsele Reacti arendajate kogukonnale. Olenemata sellest, kas loote lihtsat turundusveebi või keerulist, andmepõhist ettevõtterakendust, on `useFormState`'i mõistmine ülioluline kaasaegse, jõudluspõhise ja vastupidava Reacti koodi kirjutamiseks. Uurime selle põhikontseptsioone, praktilisi rakendusi, täpsemaid mustreid ja seda, kuidas see aitab luua paremaid veebikogemusi kasutajatele üle maailma.

Mis täpsemalt on `useFormState`?

Oma olemuselt on `useFormState` Reacti Hook, mis võimaldab komponendil uuendada oma olekut vastavalt vormi tegevuse (action) tulemusele. See on spetsiaalselt loodud töötama koos Server Actions'itega, funktsiooniga, mis võimaldab kliendikomponentidel otse serveris töötavaid funktsioone välja kutsuda, kuid seda saab kasutada ka kliendis töötavate tegevustega.

Mõelge sellest kui spetsialiseeritud olekuhaldurist vormi esitamise päringu-vastuse tsükli jaoks. Kui kasutaja esitab vormi, aitab `useFormState` hallata serverist tagasi tulevat teavet – näiteks eduteateid, valideerimisvigu või uuendatud andmeid – ja kuvab selle kasutajaliideses.

Süntaks ja parameetrid

Hook'i signatuur on lihtne ja elegantne:

const [state, formAction] = useFormState(action, initialState);

Vaatame iga osa lähemalt:

• action: See on funktsioon, mis käivitatakse vormi esitamisel. Tavaliselt on see Server Action. See funktsioon peab aktsepteerima kahte argumenti: vormi eelmine olek ja vormi andmed.
• initialState: See on väärtus, mille soovite olekule anda enne vormi esmakordset esitamist. See võib olla lihtne väärtus nagu `null` või keerukam objekt, näiteks: { message: '', errors: {} }.

Hook tagastab massiivi kahe elemendiga:

• state: Vormi praegune olek. Esialgsel renderdamisel hoiab see `initialState` väärtust. Pärast vormi esitamist hoiab see teie `action` funktsiooni tagastatud väärtust. See on reaktiivne andmeosa, mida kasutate tagasiside renderdamiseks oma kasutajaliideses.
• formAction: Teie tegevusfunktsiooni uus, mähitud versioon. Peate selle `formAction`'i edastama oma `
  ` elemendi `action` prop'ile. React kasutab seda mähitud tegevust olekuvärskenduste haldamiseks kulisside taga.

Probleem, mida `useFormState` lahendab: globaalne perspektiiv

Enne `useFormState`'i ja Server Actions'eid hõlmas vormide käsitlemine Reactis tavaliselt märkimisväärsel hulgal kliendipoolset korduvkoodi. See protsess nägi tavaliselt välja umbes selline:

1. Kliendipoolne olek: Kasutage `useState`'i vormi sisendite, laadimise staatuse ja veateadete haldamiseks.
2. Sündmuste käsitlejad: Kirjutage `onSubmit` käsitleja funktsioon, et vältida vormi vaikimisi esitamist.
3. Andmete pärimine: Käsitleja sees koostage käsitsi päringu keha ja kasutage `fetch`'i või mõnda teeki nagu Axios, et saata andmed serveri API otspunkti.
4. Olekuvärskendused: Uuendage käsitsi laadimise olekut ja pärast vastuse saamist parsige see vea- või eduteate oleku värskendamiseks.

Sellel lähenemisel on mitmeid puudusi, eriti globaalsete rakenduste puhul:

• Palju korduvkoodi: Iga vorm nõudis sarnast, kuid eristuvat olekuhaldusloogikat, mis viis korduva koodini.
• Võrgu latentsusprobleemid: Kõrge latentsusega piirkondade kasutajate jaoks võib "esita" nupu klõpsamise ja tagasiside nägemise vaheline viivitus olla märkimisväärne. Optimistlikud kasutajaliidese uuendused on võimalikud, kuid lisavad veel ühe keerukuse kihi.
• Sõltuvus JavaScriptist: Kogu vormi esitamise loogika sõltub JavaScriptist. Kui skripti laadimine ebaõnnestub või see on keelatud, on vorm täiesti mittetoimiv. See on kriitiline juurdepääsetavuse ja vastupidavuse probleem globaalsele kasutajaskonnale, kellel on erinevad seadmed ja võrgutingimused.
• Kliendi-serveri lahusus: Kliendi ja serveri loogika on täielikult eraldatud. Serveris valideerimine ja seejärel nende vigade kuvamine kliendis nõuab hoolikalt kavandatud API lepingut.

`useFormState` koos Server Actions'itega lahendab need probleemid elegantselt. See loob otsese, olekupõhise kanali vormi kasutajaliidese ja serveriloogika vahel. See võimaldab vaikimisi progressiivset täiustamist – vorm töötab ka ilma JavaScriptita – ja vähendab drastiliselt vormi esitamiste käsitlemiseks vajaliku kliendipoolse koodi hulka.

Praktiline näide: rahvusvahelise tellimisvormi loomine

Loome praktilise näite: uudiskirja tellimisvorm globaalsele teenusele. Teostame valideerimise serveris ja kuvame kasutajale asjakohaseid teateid.

1. samm: serveri tegevuse (Server Action) defineerimine

Esmalt peame looma funktsiooni, mis töötab serveris. Next.js rakenduses paigutaksite selle tavaliselt faili, mille ülaosas on direktiiv `'use server'`.

See funktsioon, nimetagem seda `subscribeAction`, võtab vastu eelmise oleku ja `FormData` vormist. See teostab valideerimise ja tagastab uue olekuobjekti.

Fail: `app/actions.js`

            
'use server';

// Lihtne utiliit võrguviivituse simuleerimiseks demonstratsiooni eesmärgil.
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export async function subscribeAction(prevState, formData) {
  const email = formData.get('email');

  // Põhiline serveripoolne valideerimine
  if (!email || !email.includes('@')) {
    return { message: 'Palun sisestage kehtiv e-posti aadress.', status: 'error' };
  }

  // Simuleerime andmebaasikutset või API päringut
  console.log(`Tellin ${email} uudiskirja...`);
  await sleep(1500);

  // Simuleerime potentsiaalset viga kolmanda osapoole teenusest
  if (email === 'fail@example.com') {
    return { message: 'See e-posti aadress on blokeeritud. Palun kasutage teist.', status: 'error' };
  }

  // Edu korral
  return { message: `Täname tellimuse eest, ${email}!`, status: 'success' };
}

            

              
                Copy
              
            
          

Märkus funktsiooni signatuuri kohta: Funktsioon `subscribeAction` võtab esimese argumendina `prevState`. See on nõue igale funktsioonile, mida kasutatakse koos `useFormState`'iga. Teine argument, `formData`, on standardne FormData objekt, mis annab teile lihtsa juurdepääsu vormi sisendväärtustele `formData.get('inputName')` kaudu.

2. samm: vormikomponendi loomine `useFormState` abil

Nüüd loome oma Reacti komponendi. See komponent kasutab `useFormState` hook'i meie `subscribeAction`'i tagasiside haldamiseks.

Fail: `app/subscription-form.js`

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';

const initialState = {
  message: null,
  status: null,
};

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

  return (
    
      
Telli meie globaalne uudiskiri
      
Püsige kursis uudiste ja ülevaadetega üle maailma.
      
      

        E-posti aadress:
        
      

      Telli

      {state?.message && (
        

          {state.message}
        
      )}
    
  );
}

            

              
                Copy
              
            
          

Analüüsime, mis siin toimub:

1. Me impordime `useFormState` teegist `react-dom`. Pange tähele, et see tuleb `react-dom`'ist, mitte `react`'ist, kuna see on seotud DOM'i renderdamise ja vormide käsitlemise loogikaga.
2. Me defineerime `initialState` objekti. See on see, milline `state` on esimesel renderdamisel.
3. Me kutsume välja `useFormState(subscribeAction, initialState)`, et saada meie `state` objekt ja mähitud `formAction`.
4. Me edastame tagastatud `formAction`'i otse `
   ` elemendi `action` prop'ile. See on maagiline lüli.
5. Me renderdame tingimuslikult lõigu, et kuvada `state.message`, kui see ei ole null. Saame isegi kasutada `state.status`'t, et rakendada erinevaid stiile edu- ja veateadetele.

Selle seadistusega, kui kasutaja esitab vormi, käivitab React serveris `subscribeAction`'i. Funktsioon käivitub ja selle tagastatud väärtusest saab meie komponendis uus `state`, mis käivitab uuesti renderdamise tagasiside kuvamiseks. See kõik toimub ilma käsitsi `fetch` kutseteta või `useState` hook'ideta serveri vastuste jaoks.

3. samm: kasutajakogemuse parandamine `useFormStatus` abil

Meie vorm on funktsionaalne, kuid puudu on oluline osa kasutajakogemusest: tagasiside esitamisprotsessi ajal. Meie serveri tegevusel on kunstlik 1,5-sekundiline viivitus, kuid kasutajaliides ei anna mingit märku, et midagi toimuks. Aeglasema ühendusega kasutajad võivad nuppu mitu korda klõpsata, arvates, et see on katki.

Siin tuleb appi kaas-hook `useFormStatus`. See annab teavet vanema `` esitamise oleku kohta.

Oluline reegel: `useFormStatus`'t saab kasutada ainult komponendis, mis on `` elemendi järeltulija. Seda ei saa kasutada samas komponendis, mis renderdab `` elementi ennast.

Loome spetsiaalse `SubmitButton` komponendi.

Fail: `app/submit-button.js`

            
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Tellin...' : 'Telli'}
    
  );
}

            

              
                Copy
              
            
          

`useFormStatus` hook tagastab objekti, mis sisaldab `pending` boolean väärtust. See väärtus on `true`, kui vormi esitatakse, ja `false` muul ajal. Me kasutame seda nupu keelamiseks ja selle teksti muutmiseks, pakkudes selget visuaalset tagasisidet.

Nüüd uuendame oma `SubscriptionForm`'i, et kasutada seda uut komponenti.

Fail: `app/subscription-form.js` (Uuendatud)

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';
import { SubmitButton } from './submit-button'; // Impordi uus komponent

// ... initialState jääb samaks

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

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

        E-posti aadress:
        
      

       {/* Kasuta uut nupu komponenti */}

      {/* ... teate kuvamine ... */}
    
  );
}

            

              
                Copy
              
            
          

Nüüd pakub meie vorm täielikku ja professionaalset kasutajakogemust. See näitab ootel olekut esitamise ajal ja kuvab pärast seda selge edu- või veateate. Ja see kõik on saavutatud minimaalse, deklaratiivse koodiga.

Täpsemad kontseptsioonid ja parimad praktikad

Kui olete põhitõed selgeks saanud, saate `useFormState`'i kasutada keerukamate stsenaariumide jaoks.

Väljaspetsiifiliste valideerimisvigade käsitlemine

Mitme väljaga vormide puhul ei piisa ühest veateatest. Peate kasutajatele näitama täpselt, millised väljad on valed. Selle saavutamiseks saame oma serveri tegevusest tagastada struktureerituma olekuobjekti.

Täiustame oma serveri tegevust, et see käsitleks nime- ja e-posti välja.

Fail: `app/actions.js` (Täiustatud)

            
'use server';

export async function complexSubscribeAction(prevState, formData) {
  await new Promise(res => setTimeout(res, 1000)); // Simuleeri viivitust
  const name = formData.get('name');
  const email = formData.get('email');
  const errors = {};

  if (!name || name.trim().length < 2) {
    errors.name = 'Nimi peab olema vähemalt 2 tähemärki pikk.';
  }

  if (!email || !email.includes('@')) {
    errors.email = 'Palun sisestage kehtiv e-posti aadress.';
  }

  if (Object.keys(errors).length > 0) {
    return { message: 'Valideerimine ebaõnnestus. Palun kontrollige välju.', errors };
  }

  // Edukas juhtum
  return { message: `Tere tulemast, ${name}!`, errors: null };
}

            

              
                Copy
              
            
          

Meie komponent saab seejärel kasutada seda detailset veaobjekti teadete kuvamiseks vastavate sisendite kõrval.

Komponendi koodijupp:

            
const initialState = { message: null, errors: {} };
const [state, formAction] = useFormState(complexSubscribeAction, initialState);

// ... JSX-is

  Nimi:
  
  {state.errors?.name && 
{state.errors.name}
}


  E-post:
  
  {state.errors?.email && 
{state.errors.email}
}


            

              
                Copy
              
            
          

See muster pakub robustset viisi täieliku (full-stack) valideerimise rakendamiseks, kus valideerimisloogika ainus tõeallikas asub serveris, kuid tagasiside on sujuvalt integreeritud kliendipoolsesse kasutajaliidesesse.

Progressiivne täiustamine: globaalne supervõime

Selle mustri üks sügavamaid eeliseid on progressiivne täiustamine. Kui kasutajal on JavaScript keelatud või kui kliendipoolsed skriptid ei lae halva võrguühenduse tõttu (tavaline stsenaarium paljudes maailma osades), töötab vorm endiselt!

Ilma JavaScriptita käivitab vormi esitamine täieliku lehe navigeerimise. Serveri tegevus käivitub ja server renderdab lehe uuesti uue olekuga. Kasutaja näeb samu valideerimisteateid või edu kinnitust, mis on lihtsalt edastatud traditsioonilise lehe uuesti laadimise kaudu. Kui JavaScript on lubatud, saab kasutaja täiustatud ja kiirema kogemuse kohapealse värskendusega ilma lehe uuesti laadimiseta.

See muudab teie rakenduse vastupidavamaks ja juurdepääsetavamaks laiemale globaalsele publikule, olenemata nende seadme võimalustest või võrgu kvaliteedist.

Tüübiohutus TypeScriptiga

Suuremahuliste rakenduste puhul on tüübiohutus esmatähtis. Saate hõlpsasti lisada TypeScripti tüüpe `useFormState`'ile ja oma tegevustele, et vältida vigu ja parandada arendajakogemust.

            
import type { FC } from 'react';
import { useFormState } from 'react-dom';

// 1. Defineeri oma oleku kuju
type FormState = {
  message: string | null;
  errors?: {
    name?: string;
    email?: string;
  };
};

// 2. Defineeri serveri tegevus tüüpidega
async function typedAction(prevState: FormState, formData: FormData): Promise {
  // ... tegevuse loogika ...
  // Tagastatav väärtus peab vastama FormState tüübile
  return { message: 'Success!', errors: undefined };
}

const MyTypedForm: FC = () => {
  const initialState: FormState = { message: null, errors: {} };

  // 3. Hook tuletab tüübid õigesti
  const [state, formAction] = useFormState(typedAction, initialState);

  return (
    

      {/* state.errors.name omab nüüd automaatset täitmist ja tüübikontrolli */}
    
  );
};

            

              
                Copy
              
            
          

Vormi lähtestamine pärast edukat esitamist

Levinud nõue on vormiväljade tühjendamine pärast edukat esitamist. Kuna `useFormState` haldab ainult *tulemuse* olekut, ei kontrolli see sisendelemente endid. Standardne HTML-i käitumine on see, et brauserid säilitavad sisendväärtused pärast esitamist.

Vormi tühjendamiseks saate kasutada `

            
// Sinu komponendi sees
const [formKey, setFormKey] = useState(0);
const [state, formAction] = useFormState(myAction, initialState);

useEffect(() => {
  if (state.status === 'success') {
    // Suurenda võtit, et sundida vormi uuesti renderdama
    setFormKey(prevKey => prevKey + 1);
  }
}, [state]);

return (
  
    {/* ... vormi väljad ... */}
  
);

            

              
                Copy
              
            
          

Teine levinud lähenemine hõlmab `useRef`'i kasutamist vormi elemendil ja `formRef.current.reset()` kutsumist `useEffect` hook'i sees, mis käivitub eduka olekumuutuse korral.

`useFormState` vs. `useState`: millal kumba kasutada?

On oluline mõista, et `useFormState` ei asenda `useState`'i. Neil on erinevad eesmärgid ja te kasutate neid sageli koos.

• `useState` on mõeldud üldotstarbelise, kliendipoolse oleku haldamiseks. See hõlmab selliseid asju nagu kasutajaliidese elementide lülitamine (nt parooli nähtavuse ikoon), sisendite kontrollimine reaalajas kliendipoolseks valideerimiseks (nt parooli tugevuse kontrollimine kasutaja tippimise ajal) või mis tahes oleku haldamine, mis ei tulene otse serveri tegevusest.
• `useFormState` on spetsiifiliselt mõeldud oleku haldamiseks, mis on otsene tulemus vormi esitamise tegevusest. Selle peamine ülesanne on peegeldada selle tegevuse tulemust tagasi kasutajaliidesesse.

Hea rusikareegel: Kui olekumuutus on tingitud vormi esitamisest ja töötlemisest tegevuse poolt, on `useFormState` õige tööriist. Kõigi muude interaktiivsete kasutajaliidese olekute jaoks teie vormis on `useState` tõenäoliselt parem valik.

Kokkuvõte: uus ajastu Reacti vormide jaoks

`useFormState` hook koos Server Actions'itega kujutab endast olulist sammu edasi vormide käsitlemisel Reactis. See lihtsustab kliendi ja serveri vahelist suhtlusprotsessi, vähendades korduvkoodi ja kõrvaldades terveid veaklasse, mis on seotud käsitsi oleku sünkroniseerimisega.

Seda kaasaegset mustrit omaks võttes saate luua rakendusi, mis on:

• Jõudlusvõimelisemad: Vähem kliendipoolset JavaScripti tähendab kiiremaid laadimisaegu ja reageerivamat tunnetust, eriti madalama jõudlusega seadmetes ja aeglastes võrkudes, mis on tavalised paljudel rahvusvahelistel turgudel.
• Vastupidavamad: Sisseehitatud progressiivse täiustamisega jääb teie põhifunktsionaalsus kättesaadavaks kõigile kasutajatele, olenemata nende sirvimiskeskkonnast.
• Paremalt hooldatavad: Vormi tegevuste paigutamine koos vastava kasutajaliidesega või nende hoidmine tsentraliseeritud serverifailides lihtsustab loogikat ja muudab koodibaasi globaalselt hajutatud meeskondade jaoks lihtsamini mõistetavaks.

Kuna Reacti ökosüsteem areneb edasi, paistab `useFormState` silma kui fundamentaalne tööriist järgmise põlvkonna veebirakenduste loomisel. Seda omandades ei õpi te lihtsalt uut hook'i; te võtate omaks vastupidavama, tõhusama ja globaalsemalt mõtleva lähenemise veebiarendusele.