React useFormStatus: En omfattande guide till hantering av formulärstatus

Hooken useFormStatus, som introducerades i React 18, erbjuder ett kraftfullt och effektivt sätt att hantera inskickningsstatus för formulär inom React Server Components. Denna hook är specifikt utformad för att fungera med serveråtgärder (Server Actions), vilket ger en sömlös integration för att hantera formulärinskickningar direkt på servern. Den förenklar processen att spåra statusen för en formulärinskickning och ger värdefull information som om formuläret är väntande, har lyckats eller har stött på ett fel. Denna guide utforskar funktionerna i useFormStatus, dess fördelar och praktiska exempel som visar dess användning i olika scenarier.

Förstå Server Actions och useFormStatus

Innan vi dyker ner i useFormStatus är det avgörande att förstå React Server Components och Server Actions. Server Actions låter dig definiera funktioner som körs på servern och som är direkt tillgängliga från dina React-komponenter. Detta möjliggör hantering av formulärinskickningar, datahämtning och andra serverside-operationer utan behov av en separat API-slutpunkt.

Hooken useFormStatus ger sedan insikter i exekveringen av dessa Server Actions som utlöses av formulärinskickningar.

Vad är useFormStatus?

useFormStatus är en React-hook som returnerar ett objekt med information om statusen för den senaste formulärinskickningen. Denna information inkluderar:

• pending: En boolean som indikerar om formuläret för närvarande skickas in.
• data: FormData-objektet som är associerat med inskickningen.
• method: HTTP-metoden som användes för inskickningen (vanligtvis 'POST').
• action: Den Server Action-funktion som utlöstes.

Fördelar med att använda useFormStatus

Att använda useFormStatus erbjuder flera viktiga fördelar:

• Förenklad statushantering: Eliminerar behovet av manuell statushantering för att spåra formulärets inskickningsstatus. Hooken uppdateras automatiskt allt eftersom inskickningen fortskrider.
• Förbättrad användarupplevelse: Ger realtidsfeedback till användare, som att visa laddningsindikatorer medan formuläret bearbetas eller visa felmeddelanden vid misslyckande.
• Ren kod: Främjar en mer deklarativ och underhållbar kodbas genom att separera logiken för formulärinskickning från komponentrendering.
• Sömlös integration med Server Actions: Utformad för att fungera perfekt med Server Actions, vilket gör det enkelt att hantera formulärinskickningar direkt på servern.

Praktiska exempel på useFormStatus

Låt oss utforska flera praktiska exempel för att illustrera användningen av useFormStatus i olika scenarier.

Grundläggande formulärinskickning med laddningsindikator

Detta exempel visar ett enkelt formulär med en laddningsindikator som visas medan formuläret skickas in.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Simulera en fördröjning för att demonstrera laddningsstatusen
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  console.log('Formuläret har skickats in med namn:', name);
  return { message: `Formuläret har skickats in med namn: ${name}` };
}

React-komponent (FormComponent.jsx):

'use client'

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

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

  return (
    

      Namn:
      
      
        {pending ? 'Skickar...' : 'Skicka in'}
      
    
  )
}

export default FormComponent

I detta exempel används egenskapen pending från useFormStatus för att inaktivera inmatningsfältet och knappen medan formuläret skickas in, samt för att visa meddelandet "Skickar...".

Hantering av lyckade och felaktiga tillstånd

Detta exempel visar hur man hanterar lyckade och felaktiga tillstånd efter en formulärinskickning.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Simulera en fördröjning
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name) {
    throw new Error('Namn är obligatoriskt');
  }

  console.log('Formuläret har skickats in med namn:', name);
  return { message: `Formuläret har skickats in med namn: ${name}` };
}

React-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 (
    

      Namn:
      
      
        {pending ? 'Skickar...' : 'Skicka in'}
      
      {pending && 
Skickar...
}
      {message && 
{message}
}
      {error && 
Fel: {error}
}
    
  )
}

export default FormComponent

I detta exempel används ett try/catch-block i funktionen handleSubmit. Om Server Action kastar ett fel fångas det och visas för användaren. Ett meddelande om att det lyckades visas vid en lyckad inskickning.

Använda FormData för komplex data

useFormStatus fungerar sömlöst med FormData, vilket gör att du enkelt kan hantera komplexa datastrukturer. Här är ett exempel som visar hur man laddar upp filer.

Server Action (actions.js):

'use server'

export async function uploadFile(formData) {
  // Simulera filbearbetning
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!file) {
    throw new Error('Ingen fil uppladdad');
  }

  console.log('Fil uppladdad:', file.name);
  return { message: `Filen har laddats upp: ${file.name}` };
}

React-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 (
    

      Ladda upp fil:
      
      
        {pending ? 'Laddar upp...' : 'Ladda upp'}
      
      {pending && 
Laddar upp...
}
      {message && 
{message}
}
      {error && 
Fel: {error}
}
    
  )
}

export default FormComponent

Detta exempel visar hur man hanterar filuppladdningar med FormData. Serveråtgärden hämtar filen från FormData-objektet och bearbetar den. Hooken useFormStatus hanterar laddningsstatusen medan filen laddas upp.

Bästa praxis för att använda useFormStatus

För att maximera fördelarna med useFormStatus, överväg dessa bästa praxis:

• Ge tydlig användarfeedback: Använd pending-statusen för att visa informativa laddningsindikatorer och inaktivera formulärelement för att förhindra flera inskickningar.
• Hantera fel elegant: Implementera felhantering för att fånga undantag i dina Server Actions och visa användarvänliga felmeddelanden.
• Validera data på servern: Utför validering på serversidan för att säkerställa dataintegritet och säkerhet.
• Håll Server Actions koncisa: Fokusera Server Actions på specifika uppgifter för att förbättra prestanda och underhållbarhet.
• Tänk på tillgänglighet: Se till att dina formulär är tillgängliga genom att tillhandahålla korrekta etiketter, ARIA-attribut och stöd för tangentbordsnavigering.

Avancerade användningsfall

Utöver de grundläggande exemplen kan useFormStatus användas i mer komplexa scenarier:

• Progressive Enhancement: Använd Server Actions och useFormStatus för att gradvis förbättra dina formulär, vilket ger en grundläggande upplevelse för användare med JavaScript inaktiverat och en rikare upplevelse för dem med JavaScript aktiverat.
• Optimistiska uppdateringar: Implementera optimistiska uppdateringar genom att uppdatera gränssnittet omedelbart efter att formuläret har skickats, med antagandet att inskickningen kommer att lyckas. Återställ uppdateringen om inskickningen misslyckas.
• Integration med formulärbibliotek: Integrera useFormStatus med populära formulärbibliotek som Formik eller React Hook Form för att hantera formulärstatus och validering. Även om dessa bibliotek ofta har sin egen statushantering, kan useFormStatus vara användbar för den slutliga inskickningsfasen till en serveråtgärd.

Att tänka på vid internationalisering (i18n)

När man bygger formulär för en global publik är internationalisering (i18n) avgörande. Här är hur man kan ta hänsyn till i18n när man använder useFormStatus:

• Lokaliserade felmeddelanden: Se till att felmeddelanden som visas för användaren är lokaliserade till deras föredragna språk. Detta kan uppnås genom att lagra felmeddelanden i översättningsfiler och använda ett bibliotek som react-intl eller i18next för att hämta lämplig översättning.
• Datum- och nummerformatering: Hantera datum- och nummerformatering enligt användarens lokala inställningar. Använd bibliotek som Intl.DateTimeFormat och Intl.NumberFormat för att formatera dessa värden korrekt.
• Stöd för höger-till-vänster (RTL): Om din applikation stöder språk som skrivs från höger till vänster (t.ex. arabiska, hebreiska), se till att dina formulär är korrekt stylade för att rymma RTL-layouter.
• Formulärvalidering: Anpassa formulärvalideringsregler till olika lokaler. Till exempel kan validering av telefonnummer variera avsevärt mellan olika länder.

Exempel på lokaliserade felmeddelanden:

// translations/en.json
{
  "form.error.nameRequired": "Please enter your name.",
  "form.success.submission": "Thank you for your submission!"
}

// translations/sv.json
{
  "form.error.nameRequired": "Vänligen ange ditt namn.",
  "form.success.submission": "Tack för din inskickning!"
}

// Komponent som använder 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' }));
  }
}

Tillgänglighetsaspekter

Tillgänglighet är en nyckelaspekt för att bygga inkluderande webbapplikationer. Här är flera tillgänglighetsaspekter att tänka på när du använder useFormStatus:

• ARIA-attribut: Använd ARIA-attribut för att ge hjälpmedelstekniker information om formulärets status. Använd till exempel aria-busy="true" på skicka-knappen medan formuläret är väntande.
• Etiketter: Se till att alla formulärfält har tydliga och beskrivande etiketter som är associerade med inmatningselementen med hjälp av <label>-elementet.
• Felmeddelanden: Visa felmeddelanden på ett sätt som är lätt att upptäcka och förstå för användare med funktionsnedsättningar. Använd ARIA-attribut som aria-live="assertive" för att meddela felmeddelanden till skärmläsare.
• Tangentbordsnavigering: Se till att användare kan navigera i formuläret med enbart tangentbordet. Använd tabindex-attributet för att kontrollera i vilken ordning elementen får fokus.
• Färgkontrast: Se till att text- och bakgrundsfärgerna som används i formuläret har tillräcklig kontrast för att vara lättlästa för användare med synnedsättningar.

useFormStatus kontra traditionell statushantering

Traditionellt har React-utvecklare hanterat formulärs inskickningsstatus med hjälp av komponentstatus (useState) eller mer komplexa statushanteringsbibliotek (t.ex. Redux, Zustand). Här är en jämförelse mellan dessa metoder och useFormStatus:

Funktion	useFormStatus	useState	Extern statushantering
Komplexitet	Låg	Medel	Hög
Integration med Server Actions	Sömlös	Kräver manuell integration	Kräver manuell integration
Standardkod (Boilerplate)	Minimal	Måttlig	Betydande
Lämpliga användningsfall	Formulär som skickas direkt till Server Actions	Enkla formulär med begränsad status	Komplexa formulär med delad status över komponenter

useFormStatus briljerar när dina formulär interagerar direkt med React Server Actions. Det minskar standardkod och förenklar processen. För mycket komplexa formulär med status som delas över flera komponenter kan dock ett fullfjädrat statushanteringsbibliotek fortfarande vara motiverat.

Felsökning av vanliga problem

Här är några vanliga problem du kan stöta på när du använder useFormStatus och hur du felsöker dem:

• useFormStatus uppdateras inte:
  • Se till att du använder useFormStatus inom ett <form>-element vars action-prop är satt till en Server Action.
  • Verifiera att din Server Action är korrekt definierad och exporterad.
  • Kontrollera om det finns några fel i din Server Action som kan förhindra att den slutförs framgångsrikt.
• Felmeddelanden visas inte:
  • Se till att du korrekt fångar fel i din Server Action och returnerar ett felmeddelande.
  • Verifiera att du visar felmeddelandet i din komponent med hjälp av error-statusen.
• Laddningsindikatorn visas inte:
  • Se till att du använder pending-statusen från useFormStatus för att villkorligt visa laddningsindikatorn.
  • Kontrollera att din Server Action faktiskt tar lite tid att slutföra (t.ex. genom att simulera en fördröjning).

Sammanfattning

useFormStatus erbjuder ett rent och effektivt sätt att hantera formulärs inskickningsstatus i React-applikationer som använder Server Components. Genom att utnyttja denna hook kan du förenkla din kod, förbättra användarupplevelsen och sömlöst integrera med Server Actions. Denna guide har täckt grunderna i useFormStatus, gett praktiska exempel och diskuterat bästa praxis för att använda den effektivt. Genom att införliva useFormStatus i dina React-projekt kan du effektivisera din formulärhantering och bygga mer robusta och användarvänliga applikationer för en global publik.