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:

forStorage.jsexport 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:

forStorage.jsexport 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:

forStorage.jsexport 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;
}