JavaScript Объект, дающий различные значения при прямом доступе

Question

Я использую React. js и пытаюсь обновить состояние моего компонента при смене реквизита. Прежде чем объяснить проблему, я должен упомянуть, что я использовал оба метода getDerivedStateFromProps и componentDidUpdate, результат один и тот же. Проблема заключается в том, что когда я пытаюсь получить доступ к значению элемента в prop, это отличается от того, получаю ли я доступ к значению напрямую или использую сам объект.

let userTickets = nextProps.support.userTickets;
// userTickets[0].messages is different from nextProps.support.userTickets[0].messages

Ниже приведен весь код функции.

let userTickets = nextProps.support.userTickets;
console.log(nextProps.support.userTickets); // this contains the correct, updated value
for (let index = 0; index < userTickets.length; index++) {
let userTicket = userTickets[index];
console.log(userTicket); // this contains old incorrect value
}

Любое руководство будет оценено. Спасибо.

Answer 1

Старайтесь не назначать реквизиты напрямую переменным, потому что они могут назначаться по ссылке вместо копирования. Попробуйте вместо этого:

const userTickets = [ ...nextProps.support.userTickets ];
console.log(nextProps.support.userTickets);
userTickets.map(ticket => {
    console.log(ticket);
});

Обратите внимание на 3-х точечное присвоение массива, это создаст новый массив со значениями массива, который "распространен"