Uppdatera data baserat på URL-parametrar i lagret i React Router

I förra lektionen lade vi till ytterligare en rutt och en sida med ett formulär för att redigera data. Det som återstår för oss är att spara de data som har angetts i vårt formulär.

Låt oss först lägga till en funktion för att uppdatera produktdata updateProduct i forStorage.js. Vi behöver skicka dess id och de ändrade data till den:

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

Därefter hämtar vi produkterna från lagret med nyckeln 'products' och hittar den som vi ändrar via dess id. Om det misslyckas kastar vi ett fel:

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

Sedan återstår det för oss att göra ändringar i den hittade produkten och skriva om den uppdaterade listan till lagret med hjälp av vår 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;
}

Ta applikationen du skapade i uppgifterna till de tidigare lektionerna. Använd lektionens material och lägg till i filen forStorage.js funktionen updateStudent för att uppdatera studentdata i lagret.