მონაცემთა რედაქტირების მარშრუტის შექმნა 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,
	},
],

ახლა ჩავრთოთ აპლიკაცია, შევქმნათ პროდუქტი, დავაკლიკოთ მასზე, შემდეგ კი რედაქტირების ღილაკზე და ვნახოთ ჩვენი ფორმა.

ერთადერთი, რაც ჩვენ გვსაჭიროება, ეს ისაა, რომ ფორმის ველებში რედაქტირებამდე ჩატვირთული იყოს მიმდინარე მონაცემები. ამისთვის ჩვენ გავიმპორტოთ edit.jsx-ში ჰუკი useLoaderData:

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 გაკვეთილში მოთხოვნილი კოდი.