React RouterにおけるFormDataを使用したデータ更新

ストレージ内の製品データを更新するための関数 updateProduct があります。次に、編集フォームからのデータに移りましょう。

HTMLフォームが送信されると、ブラウザは FormData オブジェクトを作成し、そのデータをリクエストボディとしてサーバーに送信します。各入力フィールドの値は、属性 name からオブジェクトに抽出されます（これがフォームで必要だった理由です、覚えていますか？）。さて、React Routerはリクエストをサーバーではなく、ルートの action メソッドに送信するため、 FormData もそこに渡されます。これを使って作業しましょう。

まず、ファイル edit.jsx を開き、updateProduct をインポートします：

import { updateProduct } from '../forStorage';

次に、以前行ったように、ルートオブジェクトの action 関数を記述します。この関数は loader 関数の直後に追加します。ここでは request とURLパラメータを渡します：

export async function action({ request, params }) {}

リクエストから FormData を取得し、キー:値のペアを含むオブジェクトとしてデータを抽出し、 updateProduct を使用してこれらのデータをストレージに送信します：

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

あとは main.jsx に移動し、編集ルートオブジェクトに action 関数を追加するだけです。 action をインポートします：

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

そして、編集ルートオブジェクトに追加します：

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

アプリケーションを起動し、リストにいくつか製品を追加してから、それらをクリックしてフォームを記入し、保存ボタンを押してください。開発者ツールの localforage セクションを開き、ストレージを更新することを忘れないでください。これで、keyvaluepairs セクションで、更新されたデータを含む products 配列内のオブジェクトを確認できます。

前回のレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容を参考に、学生データ編集ルートのための action 関数を作成し、編集ルートオブジェクトに追加してください。開発者ツールを開き、変更時に更新されたデータが localforage タブに確かに反映されていることを確認してください。