Kemas Kini Data melalui Parameter URL dalam Stor di React Router

Dalam pelajaran lepas, kami telah menambah satu lagi laluan dan halaman dengan borang untuk mengedit data. Tinggal lagi untuk kami menyimpan data yang telah dimasukkan ke dalam borang kami.

Sebagai permulaan, mari tambah fungsi untuk mengemaskini data produk updateProduct dalam forStorage.js. Kami perlu menghantar id produk dan data yang diubah ke dalamnya:

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

Seterusnya, dapatkan produk dari stor dengan kunci 'products' dan cari yang kami ubah mengikut idnya. Jika gagal, lemparkan ralat:

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('Tiada produk ditemukan untuk', id);				
}

Kemudian, kami hanya perlu membuat perubahan kepada produk yang ditemukan dan menulis semula senarai yang dikemaskini ke dalam stor menggunakan fungsi kami 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('Tiada produk ditemukan untuk', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, tambahkan fungsi updateStudent dalam fail forStorage.js untuk mengemaskini data pelajar dalam stor.