הצגת רשימה - React List
map. ההרצאה מראה איך לעשות את זה נכון, ולמה כל פריט צריך key.Desserts מגדירים מערך items. כל פריט הוא אובייקט עם מזהה ושם, למשל אייס קרים, פבלובה ואקלר. המרצה מניח שבפועל המערך מגיע מהשרת.map ב-JavaScript: הפונקציה מקבלת פונקציה (בדרך כלל arrow function), קוראת לה על כל פריט ומחזירה מערך חדש באותו אורך, בלי לשנות את המקורי. הדגמה: ריבוע של כל מספר במערך, והחזרת מחרוזת עם span סביב כל מספר. התוצאה היא מערך של מחרוזות HTML.items.map ומחזירים לכל פריט span. כדי להציג ערך ולא את המילה item, צריך סוגריים מסולסלים בתוך ה-span.item.name.key: הקונסול מתלונן ש-"Each child in a list should have a unique key". מוסיפים לכל אלמנט תכונה key. ערך זהה לכולם, כמו abc, יוצר שגיאה נוספת על שני children עם אותו מפתח. פותרים עם key={item.id}.key: כשהרשימה משתנה, למשל משתמש מוחק פריט, React צריכה להשוות בין הרשימה הקודמת לחדשה. עם מפתחות ייחודיים היא מזהה אילו פריטים נשארו, ומעדכנת רק את מה שהשתנה. בלעדיהם היא מציירת מחדש ומעדכנת את ה-DOM עבור כל הפריטים, גם אם יש אלף.map מעבירה גם אינדקס כארגומנט שני, ואפשר להשתמש בו כ-key. המרצה מעדיף id ייחודי.key חייב להיות ייחודי בין הפריטים. בלעדיו זו לא שגיאה, אבל יש אזהרה והרינדור איטי יותר.map ו-key.פרקי ההרצאה: הצגת רשימה - React List
תמלול ההרצאה: הצגת רשימה - React List
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת רשימה - React List» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים ליכולת הבאה של React וביכולת הזאת אנחנו הולכים לראות איך React מאפשרת לנו להציג רשימות, ליסטים. בואו נוסיף קומפוננט.
נקרא לקומפוננט Desserts קינוחים. בואו נוסיף אותו וניגש ל-Desserts. בואו נניח שאין לנו צורך אפילו ב-CSS עבור הקומפוננט הזה אז כבר שלא נשכח ניפטר ממנו.
delete וכן נציג אותו כבוקס ויש לנו כאן איזשהו ליסט מסוים שכמובן בפורום אנחנו מקבלים את כל הרשימות האלה מהשרת המרוחק שאנחנו מקושרים אליו.
ליסט זה יכול להיות ברוב המקרים מערך חד-ממדי, יש כל מיני סוגים אחרים של ליסטים אבל ברוב המקרים זה יהיה מערך חד-ממדי. אז בואו נניח שיש לנו קינוחים, בואו נקרא לזה Items הפריטים השונים של הקינוחים שלנו וזה מערך שאנחנו הולכים לקבל משרת מרוחק.
כאשר אנחנו מקבלים מערך של פריטים, ברוב המקרים כל פריט יהיה אובייקט, לא רק סתם טקסט כמחרוזת, אלא אובייקט שמגיע מהשרט, כי המידע קיים בדאטאבייס, ואולי אנחנו רוצים להבין מספר נתונים לגבי כל פריט, וכל פריט בטח יהיה לו גם איזשהו ID שמגיע מהדאטאבייס.
אז בוא נניח שהפריטים שלנו זה פריטים של קינוחים, שלכל קינוח יש קוד ושם. אז הנה הפריט הראשון, הקינוח הוא אייס קרים, ויש לנו כאן, נשכפל את זה רגע, ויש לנו כאן פריט מספר 2, פבלובה ופריט מספר 3. בואו ניקח, נניח את eClear.
והנה יש לנו סדרה של פריטים ואנחנו רוצים להציג אותם כאן. איך React מאפשרת לנו להציג אותם? בואו ניקח איזה פסקה, ובתוך הפסקה אני רוצה להציג ספנים, כל ספן הוא פריט נפרד.
אוקיי, מה אנחנו בעצם צריכים לעשות? בשביל להבין איך אפשר בריאק להציג ליסט, בואו נעצור רגע. יש לנו פה תוכנית, שוב פעם, אתר מאוד פשוט, יש לו כובד JavaScript, ובואו ניקח דמיה של איזשהו מערך.
יש לי פה מערך של, בואו נניח, מספרים, וניתן לו כמה מספרים, הנה 6, הנה 3, הנה 7, הנה 9, הנה 1, הנה 10 והנה 5. עכשיו, אם אני הולך ומציג console.log את המערך עצמו, בואו נריץ את זה רגע,
נראה את המערך בדיוק as is, כמו שהוא קיים לנו. נרפרש והנה יש לנו פה את המספרים, בדיוק את אותם מספרים של המערך. כאשר אנחנו רוצים ב-JavaScript, לא קשור ל-react, לבצע איזושהי פעולה מסוימת על כל אחד מהפריטים של המערך ולהחזיר ממנו פריט אחר עם אותה הנוסחה יש לנו פונקציה כזאת שנקראת map,
פונקציה ששייכת בכלל לג'אווה סקריפט. map אומרת לי תשמע אני הולכת למפות את המערך הזה למערך אחר, אני אחזיר לך מערך האחר לא את המערך המקורי, מערך אחר, שבמערך האחר יש את אותו מספר של פריטים כמו במערך המקורי אבל עשיתי איזושהי מניפולציה על כל אחד מהפריטים של המערך המקורי.
תגיד לי איזה מניפולציה אתה רוצה שאני אעשה על כל אחד מהפריטים של המערך המקורי ואני אחזיר לך מערך שבו כל פריט עבר את המניפולציה הזאת. בגלל זה זה נקרא כאילו מיפינו כל פריט מקורי לפריט חדש, למערך חדש.
ואז אני אחזיר לך את המערך החדש הזה. אז בוא נגיד שאנחנו רוצים לעשות חזקות של 2. כל פריט מקורי אני רוצה להכפיל אותו בחזקת 2. איך אנחנו עושים? מאפ מקבלת פונקציה, בדרך כלל נשלח לה arrow function, שמאפ הולכת לשלוח כל פריט מקורי לפונקציה שלנו והפונקציה שלנו הולכת להחזיר לה את הפריט החדש.
אז יש לי פה את הפריט המקורי, בואו נקרא לו num, כי זה מספר, ואני רוצה להחזיר num בריבוע, הנה החזרתי num בריבוע. אז עכשיו מאפ תרוץ על המערך המקורי, תיקח 6, תשלח לפונקציה שלנו, אנחנו נחזיר לה 6 בריבוע, 36, ואז היא תשמור את מה שהחזרנו במערכה חדש.
ותחרוץ לשלוש, תשלח לנו שלוש, אנחנו נחזיר לה תשע, ואז היא תשמור תשע במערכה חדש וכולי וכולי, ותחזיר לנו מערך אחר, בואו נקרא לו powers חזקות של שתיים.
בואו נוציא console.log את powers, חזור לפה ונראה שיש לנו עכשיו מערך של חזקות מהמערך המקורי. בואו נעשה עוד משהו עם הטכניקה הזאת.
ניקח ARRMap ונגיד כזה דבר, עבור כל מספר תחזיר לי, בוא נניח, מכרוזת שמכילה ספן ומכילה את המספר עצמו תוך הספן. אולי אני רוצה להציג את המכרוזת הזאת עכשיו ב-HTML עצמו.
זה כמובן מחזיר לי מערך חדש, בואו נקרא לזה HTML כלשהו, ונציג אותו. קונסול לוג. מה קרה לי? קונסול לוג.
תציג לי את הקטע html הזה. ופתאום אנחנו רואים מערך שיש בו span 6 ו-span שמכיל את 3 ו-span שמכיל את 7. וזאת בדיוק הטכניקה שאנחנו משתמשים איתה בשביל לבצע את ההצגה של הליסטים.
כמובן שיכלנו כל דבר שאנחנו רוצים למפות לעשות בפונקציית, הקונספט שלה אפשר לנו גם להחזיר כאילו html כזה אוקיי איך אנחנו משתמשים עם זה בואו נחזור בחזרה כל מה שאנחנו רוצים לעשות כאן זה להציב value בגלל זה יש לנו פה interpolation וניגש למערך שלנו נקרא items map ונמפה כל
אייטם בודד ל html span שבתוכו אנחנו רוצים לשתול את האייטם אנחנו לא יכולים לרשום פה אייטם כי אז הוא פשוט ישתול לנו את המילה אייטם. בואו רגע רק נראה את זה.
נלך ל-home וכאן מגדיר את הכינוחים שלנו. חזור בחזרה לפה, נרפרש, יש לו פה איזושהי בעיה, הבעיה היא שעדיין ה-CSS הזה קיים לי, מחקתי אותו ושימו לב מה אנחנו רואים, אנחנו רואים אייטם, אייטם, אייטם, לא בדיוק מה שרצינו לראות. קודם כל בואו נפריד את זה
קצת עם איזה קו הפרטה כזה. אני רואה אייטם, אייטם, אייטם, כאשר אני רוצה לראות את ה-value עצמו. אז אנחנו צריכים להפוך את זה ל-value, ואומר שאנחנו צריכים לעשות interpolation בתוך הקטע קוד של ה-HTML הזה, כי ברגע שאנחנו התחלנו לכתוב פה html אנחנו עברנו לעולם של ה html אם אנחנו רוצים לחזור לעולם של ה java script או ליתר דיוק interpolation בשביל לשתול איזשהו value
אנחנו צריכים סוגריים מסולסנים אבל זה לא יעזור להציג את האייטם תראו רגע מה יקרה קודם כל לא מראה לי כלום זה אומר שיש לנו שגיאת קונסול ובשגיאת קונסול נותן לנו מעין שגיאה כזאת שהיא קורית לפעמים אם אתם רואים אותה תבינו בעצם מה אתם רואים איץ' צ'יילד, לא, זו לא השגיאה הזאת האמת, אובג'קטס אר נוט ואליד אס ריאקט צ'יילד.
זאת השגיאה שחוזרת על עצמה לפעמים כאשר עשינו פה את השגיאה. ומה שקרה זה שניסינו להציג אובייקט שלם. יכלנו אולי להציג את הטו סטרינג שלו, אבל גם זה לא היה עוזר לי כי אין לו באמת טו סטרינג.
אתם רואים שהוא מציג לי מעין אובג'קט, אובג'קט, אובג'קט. כל מה שאני רוצה להציג זה רק את ה-Name שלו, רק את ה-Name שלו.
והנה אנחנו רואים אייסקרים, פבלובה ואיקלר, כאילו הצלחנו לבצע את המטלה. הצלחנו לבוא לאוסף, לעשות Map של ה-Collection המקורי מכל פריט, להציג קטע, או להחזיר ליתר דיוק,