React Router'da URL Parametrelerine Göre Veri Güncelleme

Önceki derste bir route daha eklemiştik ve verileri düzenlemek için bir form sayfası eklemiştik. Formumuzda yapılan değişiklikleri kaydetmek kaldı.

Başlangıç olarak, forStorage.js dosyasına ürün verilerini güncellemek için bir fonksiyon ekleyelim updateProduct. Fonksiyona ürünün id bilgisini ve değişen verileri iletmemiz gerekiyor:

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

Sonra, depodan 'products' anahtarıyla ürünleri alacağız ve id bilgisine göre değiştirdiğimiz ürünü bulacağız. Başarısız olursak hata fırlatacağız:

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('No product found for this', id);				
}

Ardından, bulunan üründe değişiklikleri yapmak ve setProducts fonksiyonumuzu kullanarak güncellenmiş listeyi depoya yazmak kalıyor:

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('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, forStorage.js dosyasına depodaki öğrenci verilerini güncellemek için updateStudent fonksiyonunu ekleyin.