Opdatering af data via URL-parametre i lagring i React Router

I den forrige lektion tilføjede vi endnu en rute og en side med en formular til redigering af data. Vi mangler at gemme de data, der er indtastet i vores formular.

Til at starte med tilføjer vi en funktion til at opdatere produktdata updateProduct i forStorage.js. Vi skal sende dens id og de ændrede data til den:

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

Derefter henter vi produkterne fra lagringen med nøglen 'products' og finder den, som vi ændrer, via dens id. I tilfælde af fejl kaster vi en fejl:

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);				
}

Herefter skal vi bare anvende ændringerne på det fundne produkt og overskrive den opdaterede liste i lagringen ved hjælp af vores funktion 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('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Tag det program, du oprettede i opgaverne til de forrige lektioner. Brug materialet fra lektionen, og tilføj i filen forStorage.js funktionen updateStudent for at opdatere studerendes data i lagringen.