Почему setState меняет также реквизиты, которые я добавил в состояние раньше

Question

Сценарий:

У меня есть два компонента: X и Y. Компонент Y является дочерним элементом компонента X.

внутри X:

<Y data={FormObject} />

Внутри конструкторакомпонента Y я добавляю данные реквизита (FormObject) в состояние Y, которое работает хорошо. Теперь после этого, если я меняю состояние, это влияет на реквизит. Как? Когда я закрываю компонент Y и снова открываю его, я вижу, что отображается последнее состояние. FormObject не похож на то, как это было в начале. Это потому, что объекты являются ссылочными типами, верно?

Есть ли решение для этого? Единственное решение, которое я нашел, это сделать что-то вроде этого:

Внутри конструктора Y:

const { data } = JSON.parse(JSON.stringify(this.props);

Похоже, что JSON.parse () или JSON.stringify () изменили ссылкуделая копию с другим номером памяти?

Есть ли лучший способ сделать это вместо упомянутого решения?

Answer 1

хорошо, если вам нужно иметь новую копию реквизита в вашем штате, вы можете использовать некоторую библиотеку для клонирования глубоко вложенного объекта, вы можете использовать метод deepClone из lodash.

Iтакже рекомендовал бы взглянуть на это из реактивной документации

надеюсь, это поможет.

Answer 2

Если у вашего FormObject нет дочернего объекта или массива, вы можете это исправить, используя деструктор объекта, как показано ниже:

const data = { ...this.props.data }; // it's a kind of shallow copy

Но если в нем есть какой-либо объект или массив, он не будетпредотвратить мутации.

Так что вам нужно глубокое копирование, используя JSON.pares(JSON.stringify(data)) или рекурсивный метод.