Opdatering af data via URL-parametre i lagring i React Router

I den forrige lektion tilføjede vi endnu en rute og en side med en formular til redigering af data. Vi mangler at gemme de data, der er indtastet i vores formular.

Til at starte med tilføjer vi en funktion til at opdatere produktdata updateProduct i forStorage.js. Vi skal sende dens id og de ændrede data til den:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
}

Derefter henter vi produkterne fra lagringen med nøglen 'products' og finder den, som vi ændrer, via dens id. I tilfælde af fejl kaster vi en fejl:

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

Herefter skal vi bare anvende ændringerne på det fundne produkt og overskrive den opdaterede liste i lagringen ved hjælp af vores funktion 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;
}