React Router ရှိ သိုလှောင်ရာမှ URL အချက်အလက်များဖြင့် စာမျက်နှာ အချက်အလက်များ လှမ်းရယူခြင်း

ယခုအခါ ကျွန်ုပ်တို့၏အက်ပ်ထဲသို့ ထုတ်ကုန်များ ထည့်သွင်းနိုင်ပါပြီ။ အက်ပ်ကို စတင်လိုက်ပါ၊ ခလုတ်ဖြင့် ထုတ်ကုန်အနည်းငယ် ထည့်သွင်းပါ။ ယခု စာရင်းထဲရှိ ထုတ်ကုန်များကို တစ်ခုချင်းစီ နှိပ်ကြည့်ပါက တစ်ခုချင်းစီတွင် တူညီသော စာမျက်နှာပုံစံသာ ရှိသေးကြောင်း တွေ့ရမည်၊ ဤသင်ခန်းစာနှင့် နောက်ထပ်သင်ခန်းစာများတွင် ထိုစာမျက်နှာအား လုပ်ဆောင်သွားမည်။

နောက်ထပ် အရေးကြီးသော အချက်တစ်ခုကိုလည်း သတိပြုရန်လိုပါသည်။ အမှန်တော့၊ URL တစ်ခုလုံးသည် အပိုင်းများ ဟုခေါ်သော အစိတ်အပိုင်းများအဖြစ် ပိုင်းခြားထားသည် - ၎င်းတို့သည် / သင်္ကေတများကြားရှိ URL ၏ အစိတ်အပိုင်းများ ဖြစ်သည်။ သင်မှတ်မိမည်ထင်သည်၊ ဤအက်ပ်ကို ဖန်တီးစဉ်က ကျွန်ုပ်တို့သည် လမ်းကြောင်းကို 'products/:productId' ဟု သတ်မှတ်ခဲ့သည်၊ ထို့ကြောင့် :productId ကို ဤနေရာတွင် အပြောင်းအလဲဖြစ်နိုင်သော အပိုင်း ဟုခေါ်သည်။ ၎င်းရှေ့တွင် ':' သင်္ကေတကို ထားရှိသည်။ ဤအပိုင်းရှိ တန်ဖိုးများသည် ပြောင်းလဲသွားမည်ဖြစ်ပြီး၊ ထိုတန်ဖိုးများသည်သာ URL အချက်အလက်များ (URL Params သို့မဟုတ် params) ထဲသို့ ရောက်ရှိသွားကာ၊ ၎င်းတို့ကို သတ်မှတ်ထားသောသော့ဖြင့် လှမ်းယူသည့်ကိရိယာထံသို့ ပေးပို့သည်၊ ကျွန်ုပ်တို့၏ကိစ္စတွင် ၎င်းမှာ params.productId ဖြစ်လိမ့်မည်။

စာရင်းထဲရှိ ထုတ်ကုန်များကို နှိပ်သည့်အခါ ဘရောက်ဇာ၏ လိပ်စာဘားကို ကြည့်ပါ။ သင် မြင်ရမည်မှာ၊ လိပ်စာဘားရှိ နောက်ဆုံးအပိုင်းသည် ပြောင်းလဲနေသည်၊ ထိုတန်ဖိုးများသည်သာ လှမ်းယူသည့်ကိရိယာထဲသို့ ရောက်ရှိမည်။ ကျွန်ုပ်တို့၏ ထုတ်ကုန်များသည် သိုလှောင်ရာထဲတွင် ကျွန်ုပ်တို့ကိုယ်တိုင် ထုတ်လုပ်ထားသော တစ်မူထူးခြားသည့် id ရှိသည်၊ ထို့ကြောင့် ကျွန်ုပ်တို့လိုအပ်သော ထုတ်ကုန်ကို လှမ်းယူရရှိမည် ဖြစ်သည်။

အခုတော့ အနည်းငယ် ဖြေဖျောက်ပြောဆိုမှုပြီးနောက် ထုတ်ကုန်စာမျက်နှာနှင့် လက်တွေ့လုပ်ဆောင်ကြပါစို့၊ ပိုမိုတိကျစွာပြောရလျှင် - သိုလှောင်ရာမှ အချက်အလက်များ လှမ်းယူခြင်းနှင့် အတူတူပင်ဖြစ်သည်။

ရင်းနှီးပြီးသော လုပ်ငန်းစဉ်ကို ထပ်လုပ်ကြည့်ပါ။ အစပိုင်းအနေဖြင့် forStorage.js ထဲတွင် id အရ သိုလှောင်ရာမှ ထုတ်ကုန်တစ်ခု၏ အချက်အလက်များကို ရယူရန် getProduct လုပ်ဆောင်ချက်ကို ထည့်သွင်းပါမည်။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် လုပ်ဆောင်ချက်ထဲသို့ id ကို ပေးပို့မည်ဖြစ်ပြီး၊ သင့်လျော်စွာ၊ ထုတ်ကုန်သည် "ကက်ရှ်ထဲသို့ သိမ်းထားပြီး" ဆိုပါက နှောင့်နှေးမှုမရှိဘဲ ပြသမည်ဖြစ်သည်။

forStorage.jsexport async function getProduct(id) {
  await someNetwork(`product:${id}`);
}

ထို့နောက် ထုတ်ကုန်များ၏ အခင်းအကျင်းကို ရယူရန်နှင့် ၎င်းတို့ထဲမှ ပေးပို့ထားသော id အရ ကျွန်ုပ်တို့၏ ထုတ်ကုန်ကို ရှာဖွေရန် လိုအပ်သည်။

forStorage.jsexport 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;
}