Bijwerken van gegevens via URL-parameters in de opslag in React Router
In de vorige les hebben we nog een route en een pagina met een formulier voor het bewerken van gegevens toegevoegd. We moeten nog de gegevens opslaan die in ons formulier zijn ingevoerd.
Laten we eerst een functie toevoegen om de
productgegevens bij te werken updateProduct in
forStorage.js. We moeten
er de id van het product en de gewijzigde
gegevens aan doorgeven:
export async function updateProduct(id, updates) {
await someNetwork();
}
Vervolgens halen we de producten uit de opslag met de sleutel 'products'
en vinden we degene die
we wijzigen aan de hand van zijn id. In geval van falen
gooien we een foutmelding:
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('Geen product gevonden voor', id);
}
Dan hoeven we alleen nog maar wijzigingen aan te brengen
in het gevonden product en de
bijgewerkte lijst opnieuw weg te schrijven naar de opslag met behulp van
onze functie 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('Geen product gevonden voor', id);
Object.assign(product, updates);
await setProducts(products);
return product;
}
Neem de applicatie die u heeft gemaakt in
de opdrachten bij de vorige lessen. Gebruikmakend van
de lesmaterialen, voegt u in het bestand
forStorage.js de functie
updateStudent toe voor het bijwerken
van studentgegevens in de opslag.
