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

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

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

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

routes/edit.jsximport { updateProduct } from '../forStorage';

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

routes/edit.jsxexport async function action({ request, params }) {}

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

routes/edit.jsxexport 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 をインポートします：

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

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

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

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