@Jun1801

React: Почему обновляются пропсы? Когда я не обновляю их?

https://codesandbox.io/s/z29w9y4omm <- ССЫЛКА НА КОД

Есть метод changeHandler, который отрабатывает при изменении инпута.
В нем логируется состояние стейта родителя console.log(this.props.data[this.state.id]);

Что получается: по непонятным причинам когда мы изменяем локальную форму, логи показывают, что изменяется так же и стейт родителя. Получается, что кнопка "Cancel" не работает как нужно, но сохраняет данные данные (вернее данные пишутся сразу в changeHandler.

Пожалуйста, объясните, что происходит и как это исправить

5b436b6b8b3b0362182935.png
* Здесь - если закомментировать эту строку, то стейт родителя не изменяется
  • Вопрос задан
  • 194 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вы мутируете state:
this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:
this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:
const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

Почитайте о том, что такое передача по ссылке. Почитайте про иммутабельность.
И никогда больше не пишите ничего подобного:
this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы