Aktualisierung von Daten über URL-Parameter im Speicher in React Router

In der letzten Lektion haben wir eine weitere Route und eine Seite mit einem Formular zur Bearbeitung von Daten hinzugefügt. Jetzt müssen wir noch die in unser Formular eingegebenen Daten speichern.

Zuerst fügen wir eine Funktion zum Aktualisieren der Produktdaten updateProduct in forStorage.js hinzu. Wir müssen dieser die id des Produkts und die geänderten Daten übergeben:

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

Dann holen wir die Produkte aus dem Speicher unter dem Schlüssel 'products' und finden dasjenige, das wir anhand seiner id ändern. Im Fehlerfall werfen wir einen Fehler:

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

Danach müssen wir nur noch die Änderungen in das gefundene Produkt übernehmen und die aktualisierte Liste mit Hilfe unserer Funktion setProducts im Speicher überschreiben:

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

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Verwenden Sie die Materialien der Lektion und fügen Sie in die Datei forStorage.js die Funktion updateStudent zum Aktualisieren von Studentendaten im Speicher hinzu.