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

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

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

export async function deleteProduct(id) {}

จากนั้นเราจะดึงรายการผลิตภัณฑ์จากคลังข้อมูล และค้นหาดัชนีของผลิตภัณฑ์ที่เราต้องการลบ หากมีผลิตภัณฑ์ดังกล่าว เราจะลบมันออกจาก รายการโดยใช้ splice ต่อไปเราจะเรียก setProducts และ บันทึกรายการผลิตภัณฑ์ใหม่ ลงในคลังข้อมูล:

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

นำแอปพลิเคชันที่คุณสร้างใน แบบฝึกหัดของบทเรียนที่ผ่านมา ใช้ เนื้อหาของบทเรียน เขียนฟังก์ชัน deleteStudent สำหรับลบข้อมูล นักศึกษาจากคลังข้อมูลตาม id