Почему обновление одного объекта в состоянии обновляет оба?

Question

Это сводит меня с ума - у меня есть форма для пользователей, чтобы обновить информацию об учетной записи, и я хочу показать уведомление "не забудьте сохранить после завершения", когда пользователь обновляет любой из входных данных. Для этого я сохраняю объект «пользователь» в состоянии вместе с объектом «оригинал пользователя» в состоянии. Но когда я обновляю объект "пользователь", он также обновляет объект "originalUser"!

Упрощенный код:

Я получаю данные пользователя из базы данных и устанавливаю состояние:

this.setState({loaded: true, user: data.user, originalUser: data.user});

Тогда ЕДИНСТВЕННОЕ место, где я делаю любое обновление состояния, находится в этой функции:

onInputChange = (input, val) => {
   let user = this.state.user;
   user[input] = val;
   this.setState({user: user});
    console.log(this.state.user);
    console.log(this.state.originalUser);
}

Но консоль записывает обновление, происходящее ОБА. Например, если вход «первый», а значение изначально «Джон», и я меняю его на «Джонни», то и «пользователь», и «пользователь-оригинал» имеют «первым» значение «Джонни». Почему originalUser обновляется здесь?

Answer 1

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

this.setState({loaded: true, user: {...data.user}, originalUser: {...data.user}});

Также не изменяйте состояние напрямую. Используйте это вместо:

let user = {...this.state.user};
user[input] = val;
this.setState({user: user});