Обновление значения объекта в жизненном цикле массива

Question

Я пытаюсь console.log значение массива через серию процессов.Это для отладки, но также чтобы помочь мне увидеть, как методы javascript изменяют ссылочные типы, такие как массивы и объекты.

В этой ситуации я записываю значение объекта в массив, который также находится в объекте массива:

Пример модели:

{key: '1234', class: 'Math 10', fname: 'john', lname: 'doe',
    homework: [
      {key: '123', check: 'yes'},
      {key: '12356', check: 'no'},
      {key: '12356789', check: 'na'},
    ]
    },

Я пытаюсь изменить значение 'check' в каждом объекте домашней работы.

Проблема / путаница

Когда консоль регистрирует объект домашней работы, чтобы отслеживать значение 'check', пока я пишу свой код, в тот момент, когда я изменяю значение 'check', все предыдущие журналы консоли показывают это новое значение.

Как это возможно, если я установил значение в точный момент времени?Я думал, что это как-то связано со ссылочными типами, но я использовал метод slice, чтобы убедиться, что копирую массив.

    const value = event.target.getAttribute("data-value");
    console.log("data-value is = ", value);

    const studentKey = event.target.getAttribute("data-studentkey");
    console.log("student key is = ", studentKey);

    const selectedHomeworkKey = this.state.selectedHomework;
    console.log("Seleted Homework Key is ", selectedHomeworkKey);

    const students = this.state.students.slice();
    console.log("state says students are", students);

    const selectedStudents = students.filter((student)=>{
      return( student.key === studentKey);
    })
    console.log("After filter, students is ", selectedStudents);

    const nonSelectedStudents = students.filter((student)=>{
      return( student.key !== studentKey);
    })
    console.log("Non selected students are ", nonSelectedStudents);

    const homeworkArray = selectedStudents[0].homework.slice();
    console.log("homework of the selected student is ", homeworkArray);

    const selectedHomework = homeworkArray.filter((homework) => {
      return (homework.key === selectedHomeworkKey);
    })
    console.log("selected homework for selected student is ", selectedHomework);

    let updatedHomework = selectedHomework.slice();
    console.log("updated homework before update is", updatedHomework)

    updatedHomework[0].check = value;
    console.log("updated homework after update is", updatedHomework)

Вопрос

Почему значение check 'yes' отображается во всех предыдущих файлах console.logs, хотя оно должно отображаться только в последнем файле console.log?

Answer 1

Пока вы используете React, вы должны избегать изменения состояния.И это именно то, что вы делаете в своем коде.Если this.state.students - массив объектов, .slice() не будет иметь никакого эффекта (когда вы попытаетесь изменить свойство какого-либо объекта в массиве, который вы вырезали из другого массива, свойство также будет изменено в исходном массиве)

Возможно, вы захотите, чтобы какой-нибудь помощник по неизменности облегчил ваше состояние.Я использую https://github.com/kolodny/immutability-helper

Вы можете попытаться глубоко клонировать весь объект, если вам нужно.Взгляните на https://lodash.com/docs/4.17.10#cloneDeep

В качестве обходного пути вы также можете использовать JSON.parse(JSON.stringify(object)); для быстрого клонирования объектов.