React Routerにおけるデータ編集のためのルート作成

前回のレッスンでは、個別のReactコンポーネント EditProduct内に編集用フォームを作成しました。

では、インポートの直後、関数 EditProductの前に、 新しいルート用のローダー関数を書きましょう。 この関数は product.jsx のものと同じになります。 関数にはURLパラメータが渡され、 その後、id に基づいて製品を取得します：

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

getProduct を forStorage.js からインポートします：

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

次に、main.jsx を開き、 作成したコンポーネント EditProduct とローダーをインポートします：

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

その後、製品用ルートの直後に編集用ルートオブジェクトを 配列 children に追加します：

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
  {
    path: 'products/:productId/edit',
    element: <EditProduct />,
    loader: editProductLoader,
  },
],

では、アプリケーションを起動し、 製品を作成し、それをクリックしてから 編集ボタンをクリックすると、フォームが表示されます。

ただし、編集前にフォームのフィールドに現在のデータが 読み込まれるようにする必要があります。 そのため、edit.jsx にフック useLoaderData をインポートします：

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

そして、このフックを EditProduct 関数内で使用して ローダーからデータを取得します。 コマンド return の前に追加します：

routes/edit.jsxconst { product } = useLoaderData();

次に、各入力タグに、 対応する入力フィールドの初期値を設定する 属性 defaultValue を追加します。 例えば、最初の入力フィールドは次のようになります：

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

残りの2つの入力フィールドの値は、 それぞれ 'product.cost' と 'product.amount' になります。 ただし、現時点ではフォームにデータはありません。