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:

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

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('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:

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('No product found for this', id);
  Object.assign(product, updates);
  await setProducts(products);
  return product;
}