การลบข้อมูลจากคลังข้อมูลใน React Router

แอปพลิเคชันของเราสามารถเพิ่มผลิตภัณฑ์ใหม่ แก้ไขข้อมูลได้ เหลือเพียงเพิ่มการลบข้อมูล สำหรับสิ่งนี้ เราจะผ่านขั้นตอนที่คุ้นเคยจาก บทเรียนที่ผ่านมาอีกครั้ง

เริ่มต้นด้วยการเปิดไฟล์ forStorage.js และเพิ่มฟังก์ชันสุดท้ายสำหรับการลบ ผลิตภัณฑ์ที่กำหนด deleteProduct ตาม id ของมัน:

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