React Routerda ma'lumotlarni tahrirlash uchun marshrut yaratish

O'tgan darsda biz alohida React komponentida EditProduct tahrirlash shaklini yaratdik.

Keling, endi importlardan keyin va EditProduct funksiyasidan oldin yangi marshrut uchun yuklovchi funksiyani yozamiz. U product.jsx dagi kabi bo'ladi. Funksiyaga URL parametrlari o'tkaziladi va keyin biz mahsulotni uning id si orqali olamiz:

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

getProduct ni forStorage.js dan import qilamiz:

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

Endi biz main.jsx ni ochamiz va yaratgan EditProduct komponentimizni va yuklovchini import qilamiz:

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

Keyin children massivida mahsulot marshrutidan keyin darhol tahrirlash uchun marshrut ob'ektini qo'shamiz:

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

Endi ilovani ishga tushiramiz, mahsulot yaratamiz, unga bosamiz, so'ngra tahrirlash tugmachasiga bosamiz va shaklichamizni ko'ramiz.

Yagona narsa, shakl maydonlarida tahrirlashdan oldin joriy ma'lumotlar yuklanganligiga ishonch hosil qilishimiz kerak. Buning uchun biz edit.jsx da useLoaderData hookini import qilamiz:

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

Va uni EditProduct funksiyasida yuklovchidan ma'lumot olish uchun qo'llaymiz. Uni return dan oldin qo'shamiz:

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

Endi har bir input tegiga mos keladigan qiymatlar bilan defaultValue atributini qo'shamiz. Masalan, birinchi input endi shunday ko'rinadi:

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

Qolgan ikkita input uchun qiymatlar mos ravishda 'product.cost' va 'product.amount' bo'ladi. Lekin hali shaklda ma'lumotlar yo'q.