Kusasisha Data kwa FormData katika React Router

Tuna funkta updateProduct kwa kusasisha data ya bidhaa katika kuhifadhi. Sasa tuendelee kwenye data kutoka kwa fomu yetu ya kuhariri.

Wakati wa kuwasilisha fomu ya HTML, kivinjari hunda kitu FormData na data na hutuma katika mwili wa ombi kwenye seva. Zaidi ya hayo, thamani ya kila kiingizo inachukuliwa ndani ya kitu kutoka kwa sifa name (kwa hiyo ndio maana zilihitajika kwetu kwenye fomu, unakumbuka?). Sisi sasa tunajua kuwa React Router hutuma maombi si kwenye seva, bali kwenye mbinu action ya njia yetu, ipasavyo, huko ndipo FormData itaingia. Hebu tufanye kazi na hii.

Kuanza, wacha tufungue faili yetu edit.jsx na kuagiza updateProduct:

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

Kisha tutaandika funkta kwa action ya kitu cha njia, kama tulivyofanya awali. Tutaiongeza mara baada ya funkta loader. Tutapita request yetu na vigezo vya URL:

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

Kutoka kwa ombi tutapata FormData, kisha tutatoa data yake kwa mfumo wa kitu kilicho na jozi ufunguo: thamani na kwa kutumia updateProduct tutatuma data hii kwenye kuhifadhi:

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

Imebaki tu kwenda kwenye main.jsx na kuongeza funkta action kwenye kitu cha njia ya kuhariri. Tuagize action:

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

Na kuiongeza kwenye kitu cha njia ya kuhariri:

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

Sasa anzisha programu, ongeza bidhaa kadhaa kwenye orodha, kisha ukibonyeza kwa kila moja jaza fomu na ubonyeze kitufe cha kuhifadhi. Usisahau kwenda kwenye paneli ya programu jengo kwenye sehemu ya localforage na kusasisha kuhifadhi. Sasa kwenye sehemu ya keyvaluespairs tunaweza kuona vitu kwenye safu products na data yetu iliyoingizwa.

Chukua programu uliyoiumba kwenye kazi za somo lilopita. Kwa kutumia nyenzo za somo, unda funkta action kwa njia ya kuhariri data ya mwanafunzi, ongeza kwenye kitu cha njia ya kuhariri. Fungua paneli ya programu jengo na uhakikishe kuwa wakati wa mabadiliko data iliyosafishwa inaonyeshwa kwenye kichupo cha localforage.