Andmete redigeerimise marsruudi loomine React Routeris

Eelmises tunnis loome vormi redigeerimiseks eraldi React komponendis EditProduct.

Kirjutame nüüd laadimisfunktsiooni uue marsruudi jaoks kohe pärast importi ja enne funktsiooni EditProduct. See on sama, mis product.jsx failis. Funktsioonile edastatakse URL-i parameetrid ja seejärel saame toote selle id järgi:

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

Impordime getProduct forStorage.js failist:

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

Nüüd avame oma main.jsx faili ja impordime loodud komponendi EditProduct ja laadimisfunktsiooni:

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

Seejärel lisame massiivi children marsruudi objekti redigeerimiseks kohe pärast toote marsruuti:

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

Nüüd käivitame rakenduse, loome toote, klõpsame sellel ja seejärel redigeerimisnupul ja näeme oma vormikut.

Ainus, mida peame veel tegema, on veenduda, et vormi väljadele oleksid redigeerimise eel laaditud praegused andmed. Selleks impordime edit.jsx faili hook'i useLoaderData:

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

Ja rakendame seda andmete saamiseks laadurist funktsioonis EditProduct. Lisame selle enne return käsku:

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

Nüüd lisame igale sisend-võtmele atribuudi defaultValue vastavate väärtustega iga sisendi jaoks. Näiteks esimene sisend näeb nüüd välja selline:

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

Kahe ülejäänud sisendi väärtused on vastavalt 'product.cost' ja 'product.amount'. Kuid praegu meil vormis andmeid veel pole.