React Routerにおけるストレージ内データのURLパラメータによる更新

前のレッスンでは、もう1つのルートとデータ編集用のフォームを持つページを追加しました。あとは、フォームに入力したデータを保存するだけです。

まず、製品データを更新する関数 updateProduct を forStorage.js に追加しましょう。これに製品の id と変更されたデータを渡す必要があります：

export async function updateProduct(id, updates) {
	await someNetwork();
}

次に、キー 'products' からストレージから製品を取得し、その id で変更対象の製品を見つけます。失敗した場合はエラーをスローします：

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('このIDに対応する製品が見つかりません', id);				
}

その後、見つかった製品に変更を加え、更新されたリストを関数 setProducts を使用してストレージに書き直すだけです：

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('このIDに対応する製品が見つかりません', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

これまでのレッスンの課題で作成したアプリケーションを用意してください。レッスンの資料を参考に、ファイル forStorage.js に学生データをストレージで更新する関数 updateStudent を追加してください。