Корректное удаление элемента массива через input onChange как сделать?

Question

[poniatowski]

Хотелось бы видеть в таблице суммы при каждом отмеченном инпуте. Прошу подсказать, где у меня ошибка? На первый взгляд код работает, но если речь идет о последнем инпуте, то с массива он не удаляется. Подозреваю, что это связано со сплайсом.
https://codesandbox.io/s/7zqmjrnjw1

Answer 1

[0xD34F]

А зачем какой-то отдельный массив? Храните состояние чекбоксов в элементах workers.

При изменении состояния чекбоксов обновляйте workers:

inputChange = e => {
  const index = +e.target.dataset.index;

  this.setState({
    workers: this.state.workers.map((n, i) => i === index
      ? { ...n, checked: e.target.checked }
      : n
    ),
  });
}

<input
  type="checkbox"
  data-index={index}
  onChange={this.inputChange}
  checked={item.checked}
/>

Соответственно, вычисление суммы будет выглядеть так:

const sum = this.state.workers.reduce((acc, n) => acc + (n.checked ? n.salary : 0), 0);

https://codesandbox.io/s/ol342z1znz

Answer 2

[h88p]

this.state.deleteSum.splice(this.state.deleteSum.indexOf(checkedItem), 1);

При удалении из массива вы удаляли с index, а у цены, которую вы хотите удалить, индекс может не совпадать с this.state.deleteSum

Comments

[poniatowski]

спасибо

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

Плохое решение, так как:
1. нарушен принцип иммутабельности. Если по какой-то причине массив workers будет передаваться в дочерние компоненты, то эти компоненты не будут перерисовываться по изменению workers.
2. Элементом списка, по-хорошему, должен быть тег tr, а не вся таблица.
3. Завязка на значение зарплаты не лучшая идея, добавьте две одинаковые зарплаты и полезут баги.

Answer 3

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

Вариант решения.