Puslapio duomenų įkėlimas pagal URL parametrus iš saugyklos React Router

Dabar galime pridėti produktus į mūsų programėlę. Paleiskite programėlę, pridėkite mygtuku porą produktų. Jei dabar spustelėsime pačius produktus sąraše, pamatysime, kad kiekvienas produktas kol kas turi tą patį statinį puslapį, juo mes ir užsiimsime šioje ir kitose pamokose.

Taip pat reikia atkreipti dėmesį į kitą dalyką. Apskritai, visas URL skirstomas į segmentus – tai URL dalys tarp simbolių /. Jūs tikriausiai pamenate, kad kurdami šią programėlę nurodėme kelią 'products/:productId', taigi :productId čia vadinamas dinaminiu segmentu. Prieš jį dedamas simbolis ':'. Reikšmės šiame segmente keisis, būtent jos pateka į URL parametrus (URL Params arba params), kurie perduodami įkėlėjui pagal tam tikrą raktą, mūsų atveju tai bus params.productId.

Pažvelkite į adreso juostą naršyklėje, kai spustelėjate produktus sąraše. Pamatysite, kad paskutinis segmentas adreso juostoje keičiasi, būtent šios reikšmės ir pateks į įkėlėją. O mūsų produktai saugykloje turi unikalų mūsų sugeneruotą id, tokiu būdu mums bus įkeliamas tas produktas, kurio mums reikia.

O dabar po nedidelio nukrypimo pagaliau pradėkime dirbti su produkto puslapiu, o konkrečiau – su duomenų įkėlimu iš saugyklos.

Pakartokime pažįstamą procesą. Pirmiausia forStorage.js failą pridėkime funkciją getProduct, skirtą konkrečio produkto duomenims gauti iš saugyklos pagal id. Čia mes jau perduosime į funkciją id ir, atitinkamai, jei produktas yra "package", tai jis bus rodomas be delsos:

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

Toliau mums reikia gauti produktų masyvą ir jame rasti mūsų produktą pagal perduotą 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;
}

Paimkite programėlę, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, sukurkite forStorage.js funkciją getStudent, skirtą studento duomenims gauti pagal id.