カテゴリー「React」に関連するページ一覧 3ページ目

CSVファイルのインポートなど、完了まで時間がかかる処理をHTTPリクエストの中ですべて実行すると、タイムアウトする可能性があります。このような処理では、開始APIから処理IDを返し、ブラウザから状態...

ユーザー名の登録フォームでは、入力した値がすでに使用されているかAPIで確認することがあります。入力のたびにAPIを呼び出すとリクエストが増えるため、入力が止まってから重複チェックを実行します。今回は...

TanStack Queryでデータを更新しても、取得済みの一覧や詳細は自動では書き換わりません。更新後に古いデータが表示されないよう、関連するQueryを無効化して再取得します。今回は商品一覧と商品...

管理画面の初期表示で、店舗、商品カテゴリ、配送方法など複数のデータが必要になる場合があります。それぞれのAPIを同時に呼び出す代わりに、初期表示用APIでまとめて取得するとリクエスト数を減らせます。今...

Reactでテキストボックスに入力した値を使用するには、useStateで値を保持します。今回は名前とメールアドレスを入力し、送信ボタンを押すと入力内容を表示するフォームを作成します。この例では入力値...

Reactで一覧を表示するときは、配列をuseStateへ保存できます。今回は簡単な買い物リストを作り、項目の追加と削除を行います。配列のpushやspliceで既存のstateを直接変更するのではな...

Reactでチェックボックスの選択状態を扱うには、useStateへboolean型の値を保存します。チェックボックスでは、event.target.valueではなくevent.target.che...

Reactでプルダウンの選択値を扱うには、selectのvalueとonChangeを使用します。DOMから取得するvalueは、数値の選択肢を表示していても文字列です。選択値をそのまま識別子として扱...

Reactでは、JavaScriptの条件式を使って表示する内容を切り替えます。どの書き方が短いかだけで選ぶと、条件が増えたときに表示の優先順位が分かりにくくなります。読み込み、エラー、データなしのよ...

Reactで配列を表示するとき、各要素にkeyを付けます。これは表示する項目を再描画の前後で対応付けるための目印です。keyは同じ一覧の兄弟要素の間で一意であればよく、データ全体で一意である必要はあり...