Маълумотро бо FormData дар React Router навсозӣ кардан

Мо функсияи updateProduct-ро барои навсозии маълумоти маҳсул дар анбор дорем. Акнун ба маълумоти аз форми таҳририми гузарем.

Ҳангоми фиристодани форми HTML браузер объекти FormData бо маълумот эҷод мекунад ва онро дар тани дархост ба сервер мефиристад. Инчунин, қимати ҳар як вурудии маълумот аз вижагонии name ба объект гирифта мешавад (аз ин рӯ онҳо дар форм ба мо лозим буданд, ёд доред?). Мо акнун медонем, ки React Router дархостҳоро ба сервер намефиристад, балки ба усули action роҳи мо мефиристад, бинобар ин, FormData ба он ҷо мерасад. Биёед бо ин кор кунем.

Барои оғоз файли худро кушоед edit.jsx ва updateProduct-ро ворид кунед:

import { updateProduct } from '../forStorage';

Пас мо функсияеро барои action объекти роҳ нависем, тавре ки пештар ин корро мекардем. Онро фавран пас аз функсияи loader илова кунем. Мо онро ба request ва параметрҳои URL мегузаронем:

export async function action({ request, params }) {}

Аз дархост мо FormData-ро мегирем, сипас маълумотро аз он ба сурати объект мегирем, ки ҷуфтҳои калид: қимат-ро дар бар мегирад ва бо истифода аз updateProduct мефиристем ин маълумотро ба анбор:

export 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-ро ворид мекунем:

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

Ва онро ба объекти роҳи таҳрир илова кунем:

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

Акнун барномаро оғоз кунед, якчанд маҳсулотро ба рӯйхат илова кунед, сипас бо клик кардан рӯи онҳо формро пур кунед ва тугмаи захиракуниро пахш кунед. Фароумонӣ надоред, ки ба панели таҳиягар дар бахши localforage равед ва анборро навсозӣ кунед. Акнун дар бахши keyvaluespairs мо метавонем объектҳоро дар массиви products бо маълумоти воридшудаи худ дида бароем.

Барномаеро гиред, ки шумо дар вазифаҳои дарси гузашта сохтаед. Бо истифода аз маводҳои дарс, функсияи action-ро барои роҳи таҳрири маълумоти донишҷӯ эҷод кунед, онро ба объекти роҳи таҳрир илова кунед. Панели таҳиягарро кушоед ва боварӣ ҳосил кунед, ки дар тағиротҳо маълумоти навсозӣшуда дарозмонаи localforage воқеан намоиш дода мешавад.