データベース内のアイテムの更新

請求書の更新 - シンプルな手順

請求書を更新する際の手順は、新規作成時とほとんど同じです。以下に手順を示します：

1. 動的ルートの作成: 請求書のidを含む新しい動的ルートセグメントを作成します。これにより、どの請求書を操作しているかアプリに伝えます；
2. 請求書idの取得: ページパラメータから請求書のidを取得します；
3. 特定の請求書の取得: データベースから選択した請求書の情報を取得します；
4. データベースの更新: 必要な変更を加えた後、データベース内の請求書データを更新します。

プロジェクトに戻る

1. 動的ルートの作成

データの変化に基づき、柔軟なルートが必要な場合は動的ルートセグメントを作成可能。フォルダ名を角括弧で囲むことで動的ルートを作成。例えば、ルート内で可変セグメントが必要な場合は [id]、[post]、[slug] などを使用。

1. /invoices フォルダに移動し、新しい動的ルート [id] を作成；
2. /invoices/[id] フォルダ内に 'edit' という新しいルートを追加し、page.tsx を含める。

結果：

Table の app/ui/invoices/table.tsx コンポーネントを確認。UpdateInvoice が請求書の id を受け取っていることが分かる。

<UpdateInvoice />（app/ui/invoices/buttons.tsx）コンポーネントを確認。id が href の値の一部として使用されていることが分かる。

2. 請求書IDの読み取り

次のコードを app/dashboard/invoices/[id]/edit/page.tsx に挿入。

3. 特定の請求書の取得

次に、fetchInvoiceById と fetchSellers という新しい関数をインポート。

• fetchInvoiceById は特定の請求書のデータを返却；
• fetchSellers はフォームのドロップダウンに表示する全ての売り手を返却。

Promise.all を使うことで、請求書と売り手の両方を同時に効率よく取得可能。

テストしてみましょう。請求書ページを開き、編集ボタン（ペンのアイコン）をクリック。事前入力された請求書付きのフォームにリダイレクトされるはずです。

4. データベースの更新

正しいレコードをデータベースで更新するために、id を Server Action に送信する必要があります。効果的な方法は以下の通りです。

JS の bind を使用して id を Server Action に渡します。これにより、Server Action に送信される値が適切にエンコードされます。

以下のように、form action で id を直接引数として渡すのは避けてください：

// This won't work 
<form action={updateInvoice(id)}> 

次に、アクションの作成に進み、請求書を更新するためのアクションを作成します。

試してみましょう！請求書を編集した後、フォームを送信すると、更新された請求書とともに請求書ページへリダイレクトされます。

実践例