Տվյալների թարմացում FormData-ով React Router-ում

Մենք ունենք updateProduct ֆունկցիա պահեստում ապրանքի տվյալները թարմացնելու համար: Այժմ անցնենք մեր խմբագրման ձևից ստացված տվյալներին:

HTML-ձևը ուղարկելիս բրաուզերը ստեղծում է FormData օբյեկտ տվյալներով և ուղարկում է այն հարցման մարմնում սերվեր: Ընդ որում, յուրաքանչյուր Ինփութի արժեքը դուրս է բերվում օբյեկտի մեջ name ատրիբուտից (այդ իսկ պատճառով դրանք մեզ պետք էին ձևում, հիշու՞մ եք): Մենք այժմ գիտենք, որ React Router-ը հարցումներ է ուղարկում ոչ թե սերվեր, այլ մեր երթուղու action մեթոդին, համապատասխանաբար, այնտեղ կհայտնվի նաև FormData-ը: Եկեք աշխատենք դրա հետ:

Սկսելու համար բացենք մեր edit.jsx ֆայլը և իմպորտենք updateProduct-ը:

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

Այնուհետև մենք կգրենք ֆունկցիա երթուղու օբյեկտի action-ի համար, ինչպես արել էինք նախկինում: Ավելացնենք այն անմիջապես loader ֆունկցիայից հետո: Մենք դրան կփոխանցենք մեր request-ը և URL պարամետրերը:

routes/edit.jsxexport async function action({ request, params }) {}

Հարցումից մենք կստանանք FormData-ը, այնուհետև կդուրս բերենք դրանից տվյալները որպես օբյեկտ, որը պարունակում է բանալի: արժեք զույգեր և updateProduct-ի միջոցով կուղարկենք այդ տվյալները պահեստ:

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

Մնում է միայն մտնել main.jsx և ավելացնել action ֆունկցիան խմբագրման երթուղու օբյեկտում: Իմպորտենք action-ը:

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

Եվ ավելացնենք այն խմբագրման երթուղու օբյեկտում:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

Այժմ գործարկեք հավելվածը, ավելացրեք մի քանի ապրանք ցուցակում, այնուհետև սեղմելով դրանց վրա՝ լրացրեք ձևը և սեղմեք պահպանել կոճակը: Մի մոռացեք մտնել մշակողի վահանակի localforage բաժինը և թարմացնել պահեստը: Այժմ keyvaluespairs բաժնում մենք կարող ենք տեսնել օբյեկտներ products զանգվածում մեր մուտքագրված տվյալներով: