⊗jsrtPmRtGSP 35 of 47 menu

React Router URL параметрлери боюнча баракча маалыматтарын кампадан жүктөө

Эми биз колдонмого продуктуларды коша алабыз. Колдонмону иштетиңиз, баскыч менен бир нече продукт кошуңуз. Эгерде азыр тизмедеги продуктулардын өзүнө чыкылдасак, ар бир продукттун азырынча бирдей статикалык баракчасы бар экенин көрөбүз, биз ушул жана кийинки сабактарда ушул баракча менен алектенебиз.

Ошондой эле дагы бир учурду белгилеш керек. Жалпысынан, бүт URL сегменттерге бөлүнөт - бул URL'дин / белгилеринин ортосундагы бөлүктөрү. Сиз болжолу эсиңизде, бул колдонмону түзгөндө биз 'products/:productId'⁅/p‎⁆ жолун көрсөткөнбүз, :productId бул жерде динамикалык сегмент деп аталат. Анын алдына ':' белгиси коюлат. Бул сегменттеги маанилер өзгөрүп турат, так ушулар URL параметрлерине (URL Params же params) кирет, алар жүктөөчүгө белгилүү бир ачкыч менен берилет, биздин учурда бул params.productId болот.

Тизмедеги продуктуларга чыкылдаганда, браузердин дарек сабына караңыз. Дарек сабындагы акыркы сегмент өзгөрүп турганын көрөсүз, так ушул маанилер жүктөөчүгө түшөт. Кампадагы продуктуларыбыз өзгөчө биз генерациялаган id бар, ошентип бизге керектүү продукт жүктөлөт.

Кичинекей аралыктан кийин, келиңиз азыр продукт баракчасы менен иштейли, тактап айтканда - кампадан маалымат жүктөө менен.

Тааныш процесс кайталайлы. Адегенде forStorage.js файлына кампадан id боюнча белгилүү бир продукттун маалыматын алуу үчүн getProduct функциясын кошобуз. Бул жерде биз функцияга 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 файлында id боюнча студенттин маалыматын алуу үчүн getStudent функциясын түзүңүз.

Кыргызча
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어LietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Биз сайттин иштөөсү, аналитика жана персонализация үчүн cookie файлдарын колдонобуз. Маалыматтарды иштетүү Маалыматты коргоо саясаты боюнча жүргүзүлөт.
баарын кабыл алуу ыңгайлаштыруу четке кагуу