Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

React `useForm`: add `onSuccess` / `onError` callbacks

Aperta
  • Qualcosa non va?
#524 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
67/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start by reading the useForm implementation in use-form.ts and find where wasSuccessful, errors, and error are set inside the action. Check how the form's state and submission lifecycle are handled, then add callbacks through the options described in the issue. Done means success and error callbacks run for the corresponding outcomes while the existing typed form state remains available.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version

void / @void/react 1.1.12

Problem

In React, form.post / put / patch / delete are form actions built on useActionState (#141), so they can't be awaited. That leaves no direct way to run code when a submit finishes, for example to:

  • show a toast ("Note added"),
  • clear the form (see #523),
  • move focus back to the first field,
  • navigate or close a dialog.

Today this has to be done by watching state in an effect:

const form = useForm('/notes?create', { title: '', body: '' });
const wasPending = useRef(false);

useEffect(() => {
  const settled = wasPending.current && !form.pending;
  wasPending.current = form.pending;
  if (settled && form.wasSuccessful) {
    toast.success('Note added');
  }
}, [form.pending, form.wasSuccessful]);

This is easy to get wrong. Watching wasSuccessful alone isn't enough, because it stays true until the next submission, so the effect has to track pending to detect each submit finishing.

Switching to action() works because it can be awaited, but then you lose useForm's typed data, field errors and pending.

Proposal

Callbacks in the useForm options, similar to Inertia's useForm:

const form = useForm(
  '/notes?create',
  { title: '', body: '' },
  {
    onSuccess: () => {
      form.reset();
      toast.success('Note added');
    },
    onError: (errors) => {
      /* validation errors or VoidActionError */
    },
  },
);

They could be called from inside the action in use-form.ts, right where wasSuccessful / errors / error are set today.

Lingua principale
TypeScript
Stelle
402
Fork
32
Merge medio
10h 18m
PR unite (30g)
113

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di voidzero-dev/void

Tutte le issue di voidzero-dev/void

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.