push מזריק לכל הItems

[ש.ב.ח.]

שלום וברכה
לאחר שגמרתי לשבור את הראש....
מישהו מכון להסביר למה השורה הבאה עלולה לזרוק את האלמנט החדש לכל הitems ב contentColumns

sections[0].contentColumns[0].widgets.push(1)

האם יש מצבים כאלו?

המוזר עוד יותר שזה קורה לי רק בפעם הראשונה והשניה של הpush אחרי זה הכל תקין

[yossiz]

@ש-ב-ח יש לדוגמה חיה (plunker וכדומה)? נראה לי שחסר פה יותר מדי רקע.

[ש.ב.ח.]

@yossiz ניסיתי ליצור דוגמא כזאת אבל זה לא קרה
זה קורה אצלי...
איך לא עלינו אני בודק מה הולך פה..
אני לא משתמש פה אם פונקציה שאני יצרתי... זו של js

גם עשיתי brackpoint בכלי המפתחים של js על השורה
ואכן היא נקראת רק פעם אחת

(האמת שאני מדבר על state של ריאקט אבל בדמו ניסיתי בדיוק את מה שיצרתי)
הנה הוא (הוא בסדר ועובד כמצופה)
https://codesandbox.io/s/goofy-neumann-xy65e

[yossiz]

@ש-ב-ח זה מחזק אצלי את ההרגשה שהגורם זה משהו צדדי שלא כתוב בשאלה. אבל בלי דוגמה קשה מאוד לדעת מה הדבר הצדדי הזה...

[ש.ב.ח.]

@yossiz
הצלחתי לשחזר את הבעיה כאן
https://codesandbox.io/s/angry-feather-qhhi6?file=/src/App.js

הורדתי הרבה קוד לא רלוונטי
שים לב לצעדים לשחזור

כשתפתח תראה בתצוגה את המערך
המערך מאותחל עם אובייקט אחד (הנקרא section) [ אם תשנה את הuseItems ותכניס לו פרמטר של מערך ריק הוא יאותחל כמערך ללא אלמנטים ]

הsection שמאותחל בתחילה לא עושה בעיות

אם תלחץ על הכפתור Add Widget הוא יוסיף לאובייקט האחרון בcontentColumns הראשון את הספרה 1 בתוך מערך הwidgets.

לאחר מכן תוסיף section ע"י לחיצה על הAdd section
עכשיו חזור על תהליך הוספת widget והנה הבעיה בהתגלמותה.
הספרה 1 נוספת לכל widgets שב contentColumns שבאובייקט האחרון

זה יקרה גם אם תאתחל את הuseItems למערך ריק ותוסיף אובייקט ראשון, כלומר הבעיה רק עם אלמנטים שנוספים ע"י הקוד לאחר האתחול

עיין ותמצא נחת (מקווה שגם אני )

[ש.ב.ח.]

פוסט זה נמחק!

[yossiz]

@ש-ב-ח סליחה על איחור התשובה.

מצאתי את הבעיה בשורה 46 של הקובץ useItems.js. אתה מאתחל מערך columns על ידי שימוש בפונקציית Array.fill, ואתה מעביר לו אובייקט כארגומנט.
הבעיה היא שעכשיו המערך מאוכלס בשורה של ערכים שכל אחד מצביע על אותו אובייקט.
שינוי לאבר אחד ישתקף בכולם.

האם אתה מכיר את ההבדל המהותי בין ערכים פשוטים לאובייקטים ב-JS?

(ראה כאן שאלה דומה שלך... היה זכור לי שדיברתי פעם על ההבדלים בין reference types ל-value types אז ניסיתי לחפש והגעתי לפוסט זה. אבל אין שם הסבר מעמיק על הנושא.)

[yossiz]

הדגמת הבעיה בשתי שורות:

const a = Array(3).fill({});
a[0].foo = 'bar';
console.log(a); // [{ foo: 'bar' }, { foo: 'bar' }, { foo: 'bar' }]

[ש.ב.ח.]

@yossiz תודה.

את הבדלים בין ערכים פשוטים לאובייקטים אני מכיר גם מכיר.
גם בשאלה שם הכרתי וידעתי מהבעיה, אך לא ידעתי איך לפתור אותה (בעצם "להעתיק" או "לנתק" - כמו שקראתי לזה שם).

עברתי על הקוד וחיפשתי את הבעיה כמה וכמה וכמה וכמה ... פעמים.
לפעמים צריך אורח לרגע שיראה כל פגע...

כמה גדולים דברי חכמים
אין אדם רואה נגעי(ם שהוא יצר ב)עצמו...