ניהול מערכים בתוך State ב-Class Component
setState.item ו-price ישירות אלא אובייקט product שמכיל אותם. האתחול והעדכון עובדים עם product שלם, וההצגה היא product.item ו-product.price.Increase Price בדולר, עם handler כ-arrow function.this.state.product.price++. זו גישה ישירה ל-state, והמסך לא מתעדכן.setState. זה אמנם עובד, אך React והמומחים לא ממליצים על כך. התוצאה עלולה להיות עדכון כפול, עשרה עדכונים, או חוסר עדכון.this.state.product משכפלות את האובייקט, כך שלא צריך לשכפל כל שדה, גם אם יש בו עשרים.price עם הערך החדש, והוא דורס את הישן. המרצה מעדיף את הגרסה עם משתנה ביניים, כי היא ברורה יותר, אבל שתיהן חוקיות.setState. אסור לשנות this.state.arr[8] ישירות.{...} ומערך עם [...].פרקי ההרצאה: ניהול מערכים בתוך State ב-Class Component
תמלול ההרצאה: ניהול מערכים בתוך State ב-Class Component
הטקסט המלא של הדקות הראשונות בהרצאה «ניהול מערכים בתוך State ב-Class Component» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כאשר אנחנו עובדים עם סטייט יש עוד משהו חשוב שאנחנו צריכים לשים לב אליו ולהיות ערים לגביו וזה כאשר יש לנו בתוך הסטייט אובייקטים או מערכים ולא values בצורה כזאת שהם כלומר מכרוזות או מספרים שלא נחשבים אובייקט אחר שהוא הוא רפרנס טייפ מה שנקרא למרות שסטרינג הוא גם רפרנס טייפ
אבל עדיין יש פה משהו שהוא קצת שונה שאנחנו צריכים להבין איך עובדים איתו נניח שבתוך הסטייט שלי לא היה לי אייטם ופרייס שזרוקים בצורה כזאת נניח שהיה לי פה משהו קצת אחר אני רגע רוצה אולי לשים את הכל בהערה ושכפל את זה לפה ונוריד מכאן את ההערה שיהיה פה גם את הטכניקה הראשונה וגם את הטכניקה השנייה למה הוא צועק עליי מה עשיתי שהוא צועק
עליי זה לא צריך להיות זה צריך להיות בהערה יופי בוא נניח שבתוך הסטייט אין לי אייטם ופרייס יש לי אובייקט פרודקט ובתוך פרודקט אני רוצה שיהיה לי אייטם ופרייס.
אייטם שהוא סטרינג ופרייס שהוא נאמבר. זה מה שאני רוצה שיהיה לי בתוך ה-State. נוריד רגע את שני החבר'ה האלה. הנה מצב שהוא קצת שונה ותכף אתם תבינו למה. יש לי אובייקט, תוך האובייקט יש לי אייטם ופרייס.
אוקיי, בואו נטפל בזה. אז נתחיל רגע לשנות פה את מה שצריך. אז אני הולך פה ל-State ואני אומר, אוקיי, אני רוצה להתחיל אותו, אז מן הסתם אין לי אייטם ישירות ואין לי פרייס ישירות, יש לי פרודקט והפרודקט זה אובייקט ולאובייקט יש אייטם והוא בהתחלה מחוזת ריקה ויש לו פרייס
והפרייס שלו הוא אפס הכל בסדר הנה התחלנו אז כשאתה רוצה לעשות כאן שינוי מסוים אז אל תיתן לי פה את הvalue בצורה ישירה ופה את הvalue בצורה ישירה אוקיי בואו רגע ניפטר מזה.
מה שאתה צריך לעשות זה לתת לי product וה-product שאתה צריך לתת לי יש לו item ו-price בואו רגע נסגור אותו פה בצורה כזאת וכמובן כשאתה רוצה להציג את המידע אז אתה צריך לוודא שבאמת יש לך פה product.item כלשהו ואז אתה רוצה להציג את ה-product.item ואת ה-product.price וזה יעבוד כמו שצריך, בואו רגע נסתכל על זה
ואני לוחץ עליו והנה אני רואה אייריש קופי ו-3.9 ואם אנחנו מסתכלים ב-F12 גם אנחנו לא מקבלים שוב שגיאה וזה בסדר גמור, ככה זה מעולה, עכשיו יש כאן איזושהי סיטואציה שאנחנו צריכים להיות מאוד מאוד ערים לה והסיטואציה היא כזאת, בואו נניח שאנחנו רוצים עוד לחצן, אני רגע אשכפל את הלחצן הזה,
ואנחנו רוצים בלחצן השני Increase Price בדולר. מה הבעיה? בואו נעשה פה פונקציה פריווט Increase Handler, נגדיר אותה כמובן כ-Arrow, וניתן את הפונקציה Increase Handler ללחצן השני, ומה שהלחצן השני אמור לעשות זה פשוט להעלות את המחיר.
טוב, מה בהעלות את המחיר? בואו ניגש ל-dis.state.product.price++ ונעלה את המחיר. זה חמור מאוד.
מה שאני מראה כרגע זה לא עושים, בגלל שאנחנו ניגשנו ישירות ל-state. אנחנו לא רואים פה אפילו שגיאה, כי לא הכנסנו אליו ל-state product ערך, אלא נכנסנו למשהו שהוא בתוך הפרודקט ושינינו אותו.
יכול להיות שהוא יציג לי את השינוי, יכול להיות שהוא לא יציג לי את השינוי. לפי דעתי הוא לא יציג, בואו נראה, רגע זה המצב הנוכחי. אני מעלה ואני גם לא רואה את השינוי בכלל.
בואו ניכנס רגע ל-F12, הוא לא מזהיר אותי לגביו. לפעמים הוא נותן וורנינג, אולי בגלל שאני השתקתי את כל הוורנינגים. בואו נראה, אולי אני אחזיר וורנינג.
אה, לא, בעצם לא השתקתי, הוא כן מציג לי וורנינג, אבל React לא מזהה שהיה פה שום דבר, מן הסתם זה משהו שהוא לא בסדר. אבל רגע, אני לא הראתי שום דבר חדש מהסרטון הקודם, ברור שאמרנו שלא ניגשים ישירות לסטייט, בין אם זה אובייקט, בין אם זה לא אובייקט.
אנחנו רוצים לעבור דרך ה-set state, ועדיין יש פה משהו שחשוב לציין, אני לא סתם עושה את הסרטון הזה, עדיין חשוב פה לציין משהו. ומה שחשוב פה לציין זה הדבר הבא, תראו, אתם רוצים שהמערכת כן תעדכן את השינוי החדש.
אז מן הסתם ברור שמה שאתם רוצים לעשות זה dist.state.setate ולהכניס לו פרודקט חדש. ואז אתם יכולים להגיד, טוב, אחרי ששינית לי את המוצר, את המחיר של המוצר, אין לי את המוצר השונה וששונה לתוך ה-State.
אוקיי, שימו לב מה בעצם אמרנו. שינית לי פה את המחיר של המוצר המקורי,