Попередній приклад є React версією дуже популярного на співбесіді питання, в якому початківці бувають помиляються:
const a = { v:1 };
const b = a;
b.v = 0;
console.log(a.v); // ????
❓Подумайте хвильку, що буде в консолі? А в моєму прикладі все те саме, лише загорнуте в React. Тож давайте цей приклад розберемо
1️⃣ Під час першого рендеру, ми викликаємо App і передаємо в стейт масив об'єктів, а потім, одразу ж, отримаємо цей масив назад і записуємо в константу
fields. 2️⃣ Після цього викликається компонент
Form який отримує посилання на той самий масив через пропс і кладе отримане посилання собі в стейт. Зверніть увагу, що і в App, і в Form ми маємо один і той самий масив з тими самими об'єктами.3️⃣ Після зміни інпуту, викликається метод SetField, який записує значення в поле value об'єкту. Потім створюється новий масив, який записується в стейт
Form. Але цей новий масив все ще містить ті самі об'єкти які він отримав від компоненту App. Тому, змінюючи їх в одному місці, вони змінюються усюди. 😊От і вся магія, як бачите нічого складного. Саме тому, доречі, я рекомендую спочатку гарно розібрати JS, а потім вже переходити до React, а не навпаки.
🔨 Шляхів вирішити цю ідею - багато. Наприклад не мутувати стейт, про що книжка пише з самого початку. Або, передавати в форму клони за допомогою structuredClone або JSON.stringify/JSON.parse.
❗️Головне те, щоб ви розуміли що відбувається і чому. І тоді вирішення проблеми знайти буде геть не складно. Ще й співбесіду буде проходити легше)
Бережіть себе, допомагайте ЗСУ, скоро побачимось!