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

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

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

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

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

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

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

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

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

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

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

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

import { Form, useLoaderData } from 'react-router-dom';

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

const { product } = useLoaderData();

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

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

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

これまでのレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考にして、学生データ編集用ルートのための関数 loader を edit.jsx 内に作成してください。

配列 children に編集用ルートオブジェクトを追加してください。

関数 EditStudent に、このレッスンで説明した必要なコードを追加してください。