Datu ielāde lapā no URL parametriem no krātuves React Router

Tagad mēs varam pievienot produktus mūsu lietotnē. Palaidiet lietotni, pievienojiet ar pogu pāris produktus. Ja mēs tagad noklikšķināsim uz pašiem produktiem sarakstā, tad redzēsim, ka katram produktam pagaidām vēl ir vienāda statiskā lapīņa, ar to mēs nodarbosimies šajā un turpmākajās nodarbībās.

Arī jāatzīmē vēl viens moments. Kopumā, viss URL tiek sadalīts segmentos - tās ir URL daļas starp simboliem /. Jūs droši vien atceraties, ka, veidojot šo lietotni, mēs norādījām ceļu 'products/:productId', tātad :productId šeit tiek saukts par dinamisku segmentu. Pirms tā tiek likts simbols ':'. Vērtības šajā segmentā mainīsies, tieši tās nonāk URL parametros (URL Params vai params), kas tiek nodoti iekrāvējam zem noteikta atslēgas, mūsu gadījumā tas būs params.productId.

Paskatieties uz adreses joslu pārlūkprogrammā, kad noklikšķināt uz produktiem sarakstā. Jūs redzēsiet, ka pēdējais segments adreses joslā mainās, tieši šīs vērtības nonāks iekrāvējā. Un mūsu produkti krātuvē ir unikāls mūsu ģenerēts id, tādējādi mums tiks ielādēts tas produkts, kurš mums ir vajadzīgs.

Un tagad pēc nelielas atkāpes beidzot apskatīsim produkta lapīņu, konkrēti - datu ielādi no krātuves.

Atkārtosim iepazīto procesu. Sākumā forStorage.js pievienosim funkciju getProduct, lai iegūtu datus konkrētam produktam no krātuves pēc id. Šeit mēs jau nodosim funkcijai id un, attiecīgi, ja produkts ir "kešots", tad tiks izvadīts bez aizkaves:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Tālāk mums jāiegūst produktu masīvs un starp tiem jāatrod mūsu produkts pēc nodotā id:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, izveidojiet forStorage.js funkciju getStudent, lai iegūtu studenta datus pēc id.