React Routerでのストレージからのデータ削除

私たちのアプリケーションは新しい製品を追加し、データを編集することができます。あとはデータの削除機能を追加するだけです。このために、前のレッスンで学んだ手順を再度実行します。

まず最初に、ファイル forStorage.js を開き、特定の製品をその id で削除するための最後の関数 deleteProduct を追加します。

forStorage.jsexport async function deleteProduct(id) {}

次に、ストレージから製品のリストを取得し、削除したい製品のインデックスを見つけます。もしそのような製品があれば、splice を使ってリストから削除します。その後、setProducts を呼び出し、新しい製品リストをストレージに保存します。

forStorage.jsexport async function deleteProduct(id) {
  let products = await localforage.getItem('products');
  let index = products.findIndex((product) => product.id === id);
  if (index > -1) {
    products.splice(index, 1);
    await setProducts(products);
    return true;
  }
  return false;
}