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.