Oppdatering av data via URL-parametre i lagring i React Router

I forrige leksjon la vi til enda en rute og en side med et skjema for redigering av data. Det som gjenstår for oss er å lagre dataene som er lagt inn i skjemaet vårt.

Til å begynne med legger vi til en funksjon for oppdatering av produktdata updateProduct i forStorage.js. Vi må sende inn id til produktet og de endrede dataene:

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

Deretter henter vi produktene fra lagring under nøkkelen 'products' og finner den vi endrer via dens id. Ved feil kaster vi en feil:

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

Deretter gjenstår det for oss å gjøre endringer i det funnet produktet og overskrive den oppdaterte listen i lagring ved hjelp av vår funksjon 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;
}

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen og legg til i filen forStorage.js funksjonen updateStudent for oppdatering av studentdata i lagring.