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

Question

[Jun1801]

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

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

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

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


* Здесь - если закомментировать эту строку, то стейт родителя не изменяется

Comments

[Mikhail Osher]

Читайте основы JS, как работают объекты, что такое передача по значению/ссылке.
Читайте документацию по React - изменения состояния компонента.

Answer 1

[Антон Спирин]

Вы мутируете 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.

Comments

[Jun1801]

Я так и думал, что проблема в ссылке. Я только начал разбираться в реакте. Спасибо за помощь! Конкретно в данном примере везде нужно использовать this.setState?

[Антон Спирин]

Jun1801,

changeHandler = e => {
    const { target } = e;
    const { name } = target;
    const value = target.type === 'checkbox' ? target.checked : target.value;

    this.setState({
      data: {
        [this.state.id]: {
          [name]: value,
        },
      },
    });
  };

Честно говоря, не ясно зачем вы используете структуру data[this.state.id] вместо того, чтобы использовать просто data.

getField, по мне, напрасный метод, который только усложняет ваш код. Лучше просто описать форму в render. Так будет гораздо читаемей и проще будет вносить изменения. Хотя, если вы делаете dashboard, в универсальной форме, конечно, есть смысл.

[Jun1801]

Антон Спирин, Спасибо!

[Jun1801]

Антон Спирин, второй час уже бьюсь, как сделать именно обновление данных в стейте, а не замену?

this.setState({
      data: [...this.state.data].forEach((el, i) => {
        if (i == this.state.id) {
          console.log("el", i, el[name], value);
          return (el[name] = value);
        }
      })
    });

Пробую так, не работает, массив data вообще удаляется

[Антон Спирин]

Jun1801, что-то я об этом не подумал

changeHandler = e => {
    const { target } = e;
    const { name } = target;
    const value = target.type === 'checkbox' ? target.checked : target.value;

    this.setState({
      data: {
        [this.state.id]: {
          ...this.state.data[this.state.id],
          [name]: value,
        },
      },
    });
  };