Memperbarui Data Berdasarkan Parameter URL di Penyimpanan di React Router

Pada pelajaran sebelumnya, kita menambahkan satu lagi rute dan halaman dengan formulir untuk mengedit data. Yang tersisa bagi kita adalah menyimpan data yang dimasukkan ke dalam formulir kita.

Pertama, mari tambahkan fungsi untuk memperbarui data produk updateProduct di forStorage.js. Kita perlu meneruskan id produk dan data yang diubah ke dalamnya:

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

Selanjutnya, dari penyimpanan dengan kunci 'products' dapatkan produk-produk dan temukan yang sedang kita ubah berdasarkan id-nya. Jika gagal, lemparkan sebuah error:

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

Kemudian, kita tinggal memasukkan perubahan ke produk yang ditemukan dan menulis ulang daftar yang telah diperbarui ke penyimpanan menggunakan fungsi kita 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;
}

Ambil aplikasi yang Anda buat dalam tugas-tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tambahkan fungsi updateStudent ke file forStorage.js untuk memperbarui data siswa di penyimpanan.