نمایش پویای همبرگر (پیام اولیه)

Dynamic Burger Display

0 141

نمایش پویای همبرگر (پیام اولیه)

در قسمت قبلی توانستیم که محتویات همبرگر را از طریق state مدیریت کرده و به صورت پویا نمایش دهیم. حالا سوالی پیش می آید که اگر مقدار محتویات همبرگر همگی صفر باشند چه می شود؟

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در این صورت در مرورگر شاهد چنین چیزی خواهیم بود:

همبرگر بدون محتویات
همبرگر بدون محتویات

کد ما هیچ مشکلی ندارد و خطایی هم دریافت نمی کنیم اما بهتر است به جای آنکه فقط یک همبرگر خالی به کاربر نمایش دهیم به او پیامی هم بدهیم که مثلا بگوید «لطفا محتویات همبرگر را انتخاب کنید». چرا که هیچکس همبرگر خالی سفارش نخواهد داد بنابراین نمایش هشدار حالت ایده آل خواهد بود. برای انجام این کار باید متغیر transformedIngredients را چک کنیم:

اما این متغیر حتی اگر مقادیر state را صفر در نظر بگیریم، دارای چند آرایه ی خالی خواهد بود بنابراین چک کردن آن به سادگی دیگر آرایه ها نیست. فعلا مقدار transformedIngredients را console.log می کنیم تا شکل آن را ببینیم:

خروجی ما در مرورگر بدین شکل خواهد بود:

مقدار transformedIngredients درون Console مرورگر
مقدار transformedIngredients درون Console مرورگر

همانطور که می بینید transformedIngredients یک آرایه است که درون خود آرایه های خالی دارد بنابراین برای بررسی مقادیر درون آن نمی توانیم از متد length استفاده کنیم چرا که اگر از length استفاده کنیم مقدار خروجی ما 4 می شود یعنی خود آرایه های خالی عضو به حساب می آیند.

برای انجام این کار بهتر است آرایه را reduce کنیم. ()reduce یک تابع جاوا اسکریپتی است که یک تابع به عنوان پارامتر می گیرد؛ خود این تابع پارامتر دو پارامتر دیگر می گیرد که اولی مقدار قبلی و دومی مقدار فعلی است. این پارامترها به صورت خودکار توسط جاوا اسکریپت پاس داده می شوند.

بر اساس توضیح documentation شبکه ی توسعه دهندگان موزیلا تابع ()reduce تابعی جاوا اسکریپتی است که یک تابع کاهش دهنده (reducer) را روی تک تک اعضای یک آرایه اجرا می کند. شما خودتان مسئول نوشتن این تابع می باشید. به زبان ساده تر این تابع یک آرایه را به یک مقدار ساده (Value) تبدیل می کند. به این مثال ساده دقت کنید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در اینجا یک آرایه به نام array1 داریم که درون یک ثابت قرار داده شده است. سپس یک متغیر دیگر به نام reducer تعریف کرده ایم که همان تابع کاهش دهنده ی ما است. در کد زیر:

console.log(array1.reduce(reducer));

مقادیر 1 + 2 + 3 + 4 با هم جمع می شوند و خروجی عدد 10 خواهد بود. در کد خط بعد:

console.log(array1.reduce(reducer, 5));

مقدار اولیه نیز پاس داده شده است (عدد 5) بنابراین مقادیر 5 + 1 + 2 + 3 + 4 با هم جمع می شوند و خروجی عدد 15 خواهد بود.

در یک مثال دیگر می خواهیم اعداد درون آرایه را گرد کرده و سپس همه را با هم جمع کنیم:

خروجی عدد 24 می باشد. توجه کنید که اگر مقدار initial value را به تابع reduce نمی دادیم مقدار 23.5 میشد. برای اطلاعات بیشتر Documentation این تابع را با دقت کامل بخوانید.

من این تابع را به ادامه ی تابع دوم map در آرایه ی transformedIngredients می چسبانم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

نام پارامترهای مقدار قبلی (قبل از تغییر) و مقدار بعدی (بعد از تغییر) را arr (آرایه) و el (عنصر) گذاشته ام اما شما می توانید هر نامی برای آن ها انتخاب کنید. بدنه ی این تابع روی تمام اعضایی که از تابع دوم map پاس داده می شوند اجرا خواهد شد (چرا که به map چسبیده است) اما به غیر از بدنه یک مقدار دیگر نیز قبول می کند و آن initial value (به معنی مقدار اولیه) است. ما آن را یک آرایه ی خالی گذاشته ایم؛ تابع reduce روی تک تک عناصر برگشتی از map دوم اجرا می شود و تک تک آن ها را به initial value (مقدار اولیه) اضافه می کند. حالا می گوییم:

در واقع el (عنصر) را در  arr (آرایه) ادغام کردیم. حالا اگر به مرورگر برویم چنین چیزی را مشاهده خواهیم کرد:

نتیجه ی ادغام آرایه ها
نتیجه ی ادغام آرایه ها

یعنی آرایه های خالی حذف شده اند. حالا اگر برای مثال دو قطعه پنیر به state اضافه کنیم:

در مرورگر (قسمت console) یک آرایه می گیریم که دارای 2 شیء است (یک شیء برای هر تکه پنیر). اگر هنوز متوجه نحوه ی کار این کد نشدید بهتر است documentation تابع reduce و map را به دقت مطالعه کنید.

حالا می توانیم به راحتی چک کنیم که آیا آرایه ی ما خالی است یا خیر. برای شروع بهتر است transformedIngredients را تبدیل به let کنیم تا دیگر ثابت نباشد:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

سپس مرورگر را باز کنید:

پیام نمایش داده شده
پیام نمایش داده شده

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

(کدهای قرار گرفته برای دانلود با روش eject کردن پروژه برای CSS Module نوشته شده اند اما در خود پروژه از روش جدید استفاده کرده ایم. هنگام کار با آن ها به این نکته توجه داشته باشید). در قسمت بعد کنترل های کاربر را خواهیم ساخت.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort