React Router'da FormData bilen maglumatlary täzelemek

Bizde saklanyşdaky önümiň maglumatlaryny täzelemek üçin updateProduct funksiýasy bar. Indi redaktirleme formamyzdan gelen maglumatlara geçeliň.

HTML-forma iberilende brauzer FormData objekti döredýär we ony serwere sorag gowrumynda iberýär. Üstesine-de, her input-yň bahasy objektdäki name atributyndan alynýar (şonuň üçin forma-da biz olara gerekdi, ýadyňyzdamy?). Biz indi bilişimiz ýaly, React Router soraglary serwere däl, eýsem marşrutymyzyň action metodyna iberýär, şoňa görä hem FormData ol ýere barar. Geliň, bu bilen iş göreliň.

Başlangyç üçin edit.jsx faýlymyzy açalyň we updateProduct import edeliň:

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

Soňra, marşrut objekti üçin action funksiýasyny ýazarys, muny öňem etdik. Ony loader funksiýasyndan soň goşup bileliň. Biz oňa request we URL parametrlerini bermelidiris:

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

Biz soragdan FormData alyp, ondan maglumatlary açar: baha jübütlerini öz içine alýan objektiň görnüşinde çykararys we updateProduct ulanyp, bu maglumatlary saklanyşa ibereris:

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

Geri main.jsx faýlyna gitmek we action funksiýasyny redaktirleme marşrut objektiňe goşmak galýar. Biz action import edeliň:

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

We ony redaktirleme marşrut objektiňe goşalyň:

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

Indi programmany işlediň, sanawa birnäçe önüm goşuň, soňra olaryň üstüne basyp formany dolduryň we ýatda saklamak düwmesine basyň. Öndürijiler paneliniň localforage bölümine girmegi we saklanyşy täzelemegi ýatdan çykarmaň. Indi keyvaluepairs bölüminde biz products massiwinde girizilen maglumatlarymyz bilen objektleri görüp bilýäris.

Öňki sapagyň wezipelerinde döreden programmanyňyzy alyň. Sapagyň materiallaryny ulanyp, studentiň maglumatlaryny redaktirlemek üçin marşruta action funksiýasyny dörediň we ony redaktirleme marşrut objektiňe goşuň. Öndürijiler panelini açyň we üýtgeşmeler geçirilende täzelenen maglumatlaryň localforage goşundynda görkezilýändigine göz ýetiriň.