Adatok frissítése URL paraméterek alapján a tárolóban React Routerben
Az előző leckében hozzáadtunk még egy útvonalat és egy űrlapot az adatok szerkesztéséhez. Már csak az adatok mentése van hátra, amelyeket az űrlapunkba vittünk be.
Kezdetként adjunk hozzá egy függvényt a termék adatainak frissítéséhez updateProduct a
forStorage.js fájlban. Át kell adnunk neki a termék id-ját és a módosított adatokat:
export async function updateProduct(id, updates) {
await someNetwork();
}
Ezután a tárolóból a 'products' kulcs alapján lekérjük a termékeket és megkeressük azt, amelyiket módosítjuk a id-ja alapján. Sikertelenség esetén dobjunk egy hibát:
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);
}
Ezután már csak a módosításokat kell végrehajtanunk a megtalált terméken és felül kell írnunk a frissített listát a tárolóban a setProducts függvényünk segítségével:
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;
}
Vegye elő az alkalmazást, amelyet az előző leckék feladataihoz készített. A lecke anyagait felhasználva adja hozzá a
forStorage.js fájlhoz a updateStudent függvényt a diák adatainak frissítéséhez a tárolóban.
