Տվյալների խմբագրման երթուղու ստեղծում 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,
  },
],

Այժմ եկեք գործարկենք հավելվածը, ստեղծենք ապրանք, կտտացնենք դրան, ապա խմբագրման կոճակի վրա և կտեսնենք մեր ձևը:

Միակ բանը, որ դեռ պետք է անենք, դա ապահովել, որ դաշտերում խմբագրմանից առաջ բեռնվեն ընթացիկ տվյալները: Դրա համար մենք կիմպորտենք edit.jsx ֆայլում useLoaderData հուքը:

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

Եվ կկիրառենք այն տվյալները ստանալու համար բեռնիչից EditProduct ֆունկցիայում: Ավելացնենք այն return հրամանից առաջ:

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

Այժմ ավելացնենք յուրաքանչյուր ինպուտ թեգում ատրիբուտ defaultValue համապատասխան արժեքներով յուրաքանչյուր ինպուտի համար: Օրինակ, առաջին ինպուտը այժմ այսպիսի տեսք կունենա:

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

Մնացած երկու ինպուտների համար արժեքները կլինեն համապատասխանաբար 'product.cost' և 'product.amount': Ճիշտ է, առայժմ տվյալներ ձևում մենք չունենք: