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

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

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

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

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

routes/edit.jsximport { getProduct } from '../forStorage';

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

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

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

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

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

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

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

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

routes/edit.jsxconst { product } = useLoaderData();

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

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

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