การสร้างเส้นทางสำหรับแก้ไขข้อมูลใน React Router

ในบทเรียนที่แล้ว เราได้สร้างฟอร์มสำหรับแก้ไขไว้ในคอมโพเนนต์ React แยกต่างหาก EditProduct

ตอนนี้มาเขียนฟังก์ชันโหลดเดอร์สำหรับเส้นทางใหม่กัน ทันทีหลังจากนำเข้า และก่อนฟังก์ชัน EditProduct มันจะมีลักษณะเหมือนใน product.jsx โดยจะมีการส่งผ่านพารามิเตอร์ URL ไปยังฟังก์ชัน จากนั้นเราจะรับสินค้าตาม id ของมัน:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

นำเข้า getProduct จากไฟล์ forStorage.js:

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

ตอนนี้เราเปิดไฟล์ main.jsx ของเรา และนำเข้าคอมโพเนนต์ที่เราสร้างขึ้น EditProduct พร้อมกับโหลดเดอร์:

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

จากนั้นเพิ่มออบเจ็กต์เส้นทางสำหรับการแก้ไขลงในอาร์เรย์ children ทันทีหลังจากเส้นทางสำหรับสินค้า:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
	{
		path: 'products/:productId/edit',
		element: <EditProduct />,
		loader: editProductLoader,
	},
],

ตอนนี้มาเริ่มต้นแอปพลิเคชันของเรา สร้างสินค้า คลิกที่มัน แล้วคลิกที่ปุ่มแก้ไข เราจะเห็นฟอร์มของเรา

เพียงแต่เราต้องทำให้ข้อมูลปัจจุบันปรากฏในฟิลด์ของฟอร์ม ก่อนการแก้ไข เพื่อจุดประสงค์นี้เราจะนำเข้า hook useLoaderData ในไฟล์ edit.jsx:

import { Form, useLoaderData } from 'react-router-dom';

และใช้มันเพื่อรับข้อมูลจากโหลดเดอร์ในฟังก์ชัน EditProduct เพิ่มมันก่อนคำสั่ง return:

const { product } = useLoaderData();

ตอนนี้ให้เพิ่มแอตทริบิวต์ defaultValue ในแต่ละแท็กอินพุตพร้อมค่าที่สอดคล้องกัน สำหรับแต่ละอินพุต ตัวอย่างเช่น อินพุตแรกจะมีลักษณะดังนี้:

<input
	placeholder="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

สำหรับอินพุตที่เหลือสองตัว ค่าจะเป็น 'product.cost' และ 'product.amount' ตามลำดับ แม้ว่าตอนนี้เราจะยังไม่มีข้อมูลในฟอร์ม

นำแอปพลิเคชันที่คุณสร้างไว้ใน งานของบทเรียนที่แล้วมาใช้ โดยใช้เนื้อหาของบทเรียน ให้สร้างฟังก์ชัน loader ในไฟล์ edit.jsx สำหรับ เส้นทางแก้ไขข้อมูลนักเรียน

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

เพิ่มโค้ดที่จำเป็นตามบทเรียนสำหรับฟังก์ชัน EditStudent ของคุณ