การอัปเดตข้อมูลตามพารามิเตอร์ URL ในสโตร์ใน React Router

ในบทเรียนที่แล้ว เราได้เพิ่มเส้นทางอีกหนึ่งเส้นทางและหน้าฟอร์มสำหรับแก้ไขข้อมูล สิ่งที่เหลือคือการบันทึกข้อมูลที่กรอกลงในฟอร์มของเรา

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

export async function updateProduct(id, updates) {
	await someNetwork();
}

จากนั้น จากสโตร์โดยใช้คีย์ 'products' เราจะดึงรายการผลิตภัณฑ์และค้นหาผลิตภัณฑ์ที่เรากำลังแก้ไขโดยใช้ id ของมัน หากไม่พบ จะโยนข้อผิดพลาด:

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

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

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

นำแอปพลิเคชันที่คุณสร้างขึ้นในแบบฝึกหัดของบทเรียนที่แล้วมาใช้ โดยอาศัยเนื้อหาจากบทเรียน ให้เพิ่มฟังก์ชัน updateStudent ในไฟล์ forStorage.js เพื่ออัปเดตข้อมูลนักเรียนในสโตร์