React Router හි URL පරාමිති වලින් පිටු දත්ත ගබඩාවෙන් පූරණය කිරීම

දැන් අපට අපගේ යෙදුමට නිෂ්පාදන එකතු කළ හැකිය. යෙදුම අරඹන්න, බොත්තම භාවිතයෙන් නිෂ්පාදන කිහිපයක් එකතු කරන්න. අපි දැන් ලැයිස්තුවේ ඇති නිෂ්පාදන මත ක්ලික් කළහොත්, සෑම නිෂ්පාදනයක් සඳහාම තවමත් එකම ස්ථිතික පිටුවක් පෙනෙන බව අපට පෙනේ, එම පිටුව සමඟ අපි මෙම පාඩමෙහිදී සහ ඊළඟ පාඩම්වලදී වැඩ කරන්නෙමු.

තවත් කරුණක් සටහන් කළ යුතුය. සාමාන්යයෙන්, සම්පූර්ණ URL එක කොටස් වලට වෙන් වේ - මේවා / සංකේත අතර URL හි කොටස් වේ. ඔබ සමහර විට මතක ඇති, මෙම යෙදුම සෑදීමේදී අපි මාර්ගය 'products/:productId' ලෙස දක්වා ඇත, එහිදී :productId ඛණ්ඩය ගතික කොටස ලෙස හඳුන්වයි. එහි ඉදිරියෙන් ':' සංකේතය යොදයි. මෙම කොටසේ ඇති අගයන් වෙනස් වන අතර, හරියටම ඒවා URL පරාමිති වලට (URL Params හෝ params) ඇතුලත් වන අතර ඒවා නිශ්චිත යතුරක් යටතේ පූරකයට යොමු කරනු ලැබේ, අපගේ නඩුවේදී එය params.productId වනු ඇත.

බ්රවුසරයේ ලිපින තීරුව දෙස බලන්න, ඔබ ලැයිස්තුවේ නිෂ්පාදන මත ක්ලික් කරන විට. ඔබට පෙනෙනු ඇත, ලිපින තීරුවේ අවසාන කොටස වෙනස් වේ, හරියටම මෙම අගයන් පූරකයට ලැබෙනු ඇත. ගබඩාවේ ඇති අපගේ නිෂ්පාදනවලට අද්විතීය අප විසින් ජනනය කරන ලද id ඇත, මේ අනුව අපට අවශ්‍ය නිෂ්පාදනය පූරණය වනු ඇත.

දැන් කුඩා ඉවත්වීමකින් පසුව අපි අවසානයේ නිෂ්පාදන පිටුව සමඟ වැඩ කරමු, නිශ්චිතවම - ගබඩාවෙන් දත්ත පූරණය කිරීම සමඟ.

හුරුපුරුදු ක්‍රියාවලිය නැවත කරමු. පළමුව forStorage.js හි අපි ශ්‍රිතය getProduct එකතු කරමු id භාවිතයෙන් ගබඩාවෙන් නිශ්චිත නිෂ්පාදනයක දත්ත ලබා ගැනීමට. මෙහිදී අපි දැනටමත් ශ්‍රිතයට id යොමු කරන අතර, ඒ අනුව, නිෂ්පාදනය "කෑෂ් කර ඇත්නම්", ප්‍රමාදයකින් තොරව පෙන්වනු ඇත:

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

ඊළඟට අපි නිෂ්පාදන අරාව ලබාගෙන ඒ අතරින් ලබා දී ඇති 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;
}

පෙර පාඩම් සඳහා වූ කාර්යයන් වලදී ඔබ සෑදූ යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතයෙන්, forStorage.js හි getStudent ශ්‍රිතය සාදන්න id භාවිතයෙන් ශිෂ්‍යයෙකුගේ දත්ත ලබා ගැනීමට.