React `useForm`: add `onSuccess` / `onError` callbacks
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 67/100
- issue の種類
- 機能追加
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 402
- フォーク
- 32
- 平均マージ
- 10時間 51分
- マージ済み PR（30日）
- 100
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
voidzero-dev/void のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
voidzero-dev/void#529 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 1/5 1〜3時間 初心者へのやさしさ 78/100
voidzero-dev/void#428 ·
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 56/100
voidzero-dev/void#527 ·
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 54/100
voidzero-dev/void#525 ·
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 1〜2日 初心者へのやさしさ 52/100
voidzero-dev/void#523 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
voidzero-dev/void の issue をすべて見る
似ている issue
-
agent/scanner help wanted hive/claimed-by-scanner kind/bug stage/020-claimed
難易度 2/5 1〜3時間 初心者へのやさしさ 90/100
hivecommons/rationguard#315 ·
メンテナーはふだん 1 日以内に返信
-
agent-ready area: ui-sdk priority: p3 type: chore
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
schlessera/brain-kit#2534 ·
メンテナーはふだん 1 日以内に返信
-
bug lane:gh-5
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
LLM-4-People/bridlewise-testing#122 ·
メンテナーはふだん 1 日以内に返信
-
bug priority: P2
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
enhancement priority:low ready-for-dev
難易度 2/5 1〜3時間 初心者へのやさしさ 67/100
メンテナーはふだん 1 日以内に返信