Мутирующий клон объекта - это мутирующий исходный объект, пропущенный из родительского компонента

Question

У меня есть родительский компонент, который передает массив данных дочернему элементу, который затем выбирает объект из массива, клонирует его, мутирует и устанавливает его в состояние.

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

В настоящее время я использую React 16.7.0a, но сомневаюсь, что это как-то связано с ним.

const dummyDomain = { ...domains[domains.length - 1] }
const newDomain = Object.assign({}, dummyDomain)
newDomain.basics.name = 'please dont change the original object'

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

У меня никогда не было этой проблемы с React, поэтому я привел тот факт, что я использую React 16.7.0a.Понятно, что я не напрямую ссылаюсь на объект, а на самом деле создаю новый, так что дает?

Answer 1

Итак, у вас есть несколько способов справиться с этим.Подход сторонних библиотек не тянет за собой использование глубокой копии объекта.

const newDomain = JSON.parse(JSON.stringify(dummyDomain));

В противном случае вы можете спуститься по кроличьей норе, перемещая неизменяемые данные к чему-то вроде immutable.js (что делает подобные вещи).за кадром).