การอัปเดตข้อมูลด้วย FormData ใน React Router

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

เมื่อส่งฟอร์ม HTML เบราว์เซอร์จะสร้าง อ็อบเจกต์ FormData พร้อมข้อมูลและส่ง มันในเนื้อความของคำขอไปยังเซิร์ฟเวอร์ โดยที่ ค่าของแต่ละอินพุตจะถูกดึงออกมาเป็น อ็อบเจกต์จากแอตทริบิวต์ name (นั่นคือเหตุผล ที่เราต้องการมันในฟอร์ม จำได้ไหม?) ตอนนี้เรา รู้แล้วว่า React Router ส่งคำขอไม่ใช่ไปที่เซิร์ฟเวอร์ แต่ไปยังเมธอด action ของเส้นทางเรา ดังนั้น FormData ก็จะไปที่นั่นด้วย มาทำงานกับสิ่งนี้กัน

เริ่มต้นด้วยการเปิดไฟล์ของเรา edit.jsx และนำเข้า updateProduct:

import { updateProduct } from '../forStorage';

จากนั้นเราจะเขียนฟังก์ชันสำหรับ action ของอ็อบเจกต์เส้นทาง เหมือนที่เราทำมาก่อนหน้านี้ เพิ่มมันทันทีหลังจากฟังก์ชัน loader เราจะส่ง request และ พารามิเตอร์ URL ไปให้มัน:

export async function action({ request, params }) {}

จากคำขอเราจะได้ FormData จากนั้น ดึงข้อมูลจากมันเป็นอ็อบเจกต์ ที่ประกอบด้วยคู่ คีย์: ค่า และ ใช้ updateProduct เพื่อส่ง ข้อมูลนี้ไปยังที่เก็บข้อมูล:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

สิ่งที่เหลือคือเข้าไปที่ main.jsx และเพิ่มฟังก์ชัน action ลงในอ็อบเจกต์ เส้นทางแก้ไข นำเข้า action:

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

และเพิ่มมันลงในอ็อบเจกต์เส้นทาง การแก้ไข:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

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

ใช้แอปพลิเคชันที่คุณสร้างขึ้นใน งานของบทเรียนที่แล้ว โดยใช้ เนื้อหาของบทเรียน สร้างฟังก์ชัน action สำหรับเส้นทางแก้ไขข้อมูล นักศึกษา เพิ่มมันลงในอ็อบเจกต์ เส้นทางแก้ไข เปิด แผงเครื่องมือพัฒนาและตรวจสอบให้แน่ใจว่า เมื่อมีการเปลี่ยนแปลง ข้อมูลที่อัปเดตแล้ว แสดงจริงในแท็บ localforage