Hent sides data via URL-parametre fra lagring i React Router

Nu kan vi tilføje produkter til vores applikation. Start applikationen, tilføj et par produkter med knappen. Hvis vi nu klikker på selve produkterne i listen, vil vi se, at hvert produkt stadig har den samme statiske side, som vi vil begynde at arbejde med i denne og de efterfølgende lektioner.

Det er også nødvendigt at bemærke endnu et punkt. Generelt er hele URL'en opdelt i segmenter - det er dele af URL'en mellem / tegnene. Du husker sikkert, at da vi oprettede denne applikation, angav vi stien 'products/:productId', så :productId kaldes her for et dynamisk segment. Det foranstilles af tegnet ':'. Værdierne i dette segment vil ændre sig, præcis disse vil ende i URL-parametrene (URL Params eller params), som sendes til indlæseren under en bestemt nøgle, i vores tilfælde vil det være params.productId.

Kig på adresselinjen i browseren, når du klikker på produkterne i listen. Du vil se, at det sidste segment i adresselinjen ændrer sig, præcis disse værdier vil komme ind i indlæseren. Og vores produkter i lagringen har en unik id genereret af os, således at det produkt, vi har brug for, vil blive indlæst.

Og nu, efter en lille uddybning, lad os endelig arbejde med produktsiden, mere specifikt - med indlæsning af data fra lagringen.

Lad os gentage den velkendte proces. Til at starte med i forStorage.js tilføjer vi funktionen getProduct for at hente data for et specifikt produkt fra lagringen baseret på id. Her vil vi overføre id til funktionen, og følgelig, hvis produktet er "cachet" hos os, så vil det blive vist uden forsinkelse:

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

Dernæst skal vi hente arrayet af produkter og blandt dem finde vores produkt baseret på det overførte 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;
}

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at oprette funktionen getStudent i forStorage.js for at hente studerendes data baseret på id.