Как отследить изменение state?

Question

[Илья Солдатенков]

Скажем, у меня есть три поля в стейте, одно сумма, другое скидка, третье результирующее. А теперь скажем что полей 10 и изменяются они в разных местах и в разное время.
Вопрос вот какой, - есть ли способ результирующему полю "следить" за изменениями в нужных полях, чтобы конструировать свое значение из них. Похожий аналог - контролируемые компоненты, вот хотелось бы также сделать с нужным полем в стейте.

Answer 1

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

Лучше вообще не хранить результирующие поля, а считать значения по факту.

Comments

[Илья Солдатенков]

а считать значения по факту.

Не знаю правильно ли я вас понял, вы имеете ввиду такие виды данных не записывать в стейт, а напрямую рендерить в jsx? Т.е., к примеру, значением инпута value={this.state.a*this.state.b}? А если мне этот результат нужно отправить на сервер?

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

wrqqq, точно так же считаете:

handleSubmit = () => {
  const { a, b } = this.state;
  const c = a * b;

  postData({ c });
};

[Илья Солдатенков]

Антон Спирин, понял вас, но проблема в том, что у меня код устроен так, что на 20-30 текстовых полей есть один хендлер, который принимает на вход имя поля и динамические меняет стейт через это имя.

this.setState({[e.target.name] : e,target.value}). Наверное так плохо делать.

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

wrqqq, это никак не мешает считать по этим полям нужные значения ни в render, ни в хандлерах.

[Илья Солдатенков]

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

[Илья Солдатенков]

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

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

wrqqq, покажите свой код. Без него не ясно какие вы видите проблемы в решении такой простой задачи.

[Илья Солдатенков]

Антон Спирин, не могу, nda.

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

wrqqq, вы можете написать абстрактный пример, демонстрирующий как вы рендерите, обновляете и отправляете данные.

[Илья Солдатенков]

Антон Спирин, если вам этого будет достаточно, ок.

<input name="a" value={this.state.a} onChange={(e)=> handler(e, 'a')}>
<input name="b" value={this.state.b} onChange={(e)=> handler(e, 'b')}>
<input name="c" value={this.state.a*this.state.b}>
____
handler = (e, name) => {
this.setState({name: e.target.value});
}

Собственно, C поле сейчас вычисляет прямо в value результат, таким образом при изменении одного из двух первых инпутов мы динамически может отображать новый результат. Но полей много, я не очень понимаю, как мне определять что именно несколько из множества инпутов должны делать со своими значениями для результирования.

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

wrqqq, а зачем вам вообще инпут с итоговой суммой?
Код ваш можно упростить:
const { a, b, c, d } = this.state;
<input name="a" value={a} onChange={handler}>

handler = e => {
  const { name, value } = e.target;
  this.setState({ [name]: value });
};

И я в комментариях под хандлером подразумевал хандлер отправки формы.

[Илья Солдатенков]

Антон Спирин, Да, я понимаю что можно упростить, но как то исходя из легаси и каких то еще вещей важно было передавать второй арг, хотя согласен что это избыточно.
Инпут с произведением нужен потому как нужно дать пользователю эту информацию промежуточную + нужно дать возможность ее поменять в ручную. Собственно, то что я написал не сработает в данном случае.

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

wrqqq, а как остальные поля должны реагировать на изменение пользователем поля "c" и как измененное пользователем поле "с" должно реагировать на изменение полей "a" и "b"?

[Илья Солдатенков]

Антон Спирин, При изменении a или b меняется c, с в свою очередь тоже участвует в дальнейших подсчетах.

и как измененное пользователем поле "с" должно реагировать на изменение полей "a" и "b"?

- при изменении a или b, c обратно становится зависимым от а и б.

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

wrqqq, тут без условий не обойтись.
Пример
"с" зависит от "a" и "b", "d" зависит от "b" и "с".

[Илья Солдатенков]

Спасибо вам за наглядный пример. Все же результирующие придется записать в стейт. На этом пойду переделывать код.