Проблемы с удалением определенных детей в JS

Question

Когда я пытаюсь удалить дочерний элемент, изменяя его состояние, он устанавливает более старое состояние ... Поэтому вместо удаления 1 элемента он удаляет все после него.

Я пытался сращивать, фильтровать, срезать и другие методы, чтобыманипулировать массив, который я использую для состояния.

Код здесь:

https://codesandbox.io/embed/tender-meitner-s75d4?fontsize=14

И это то, что не работает, потому что что-то я не понимаю о состоянии.

const removeChildRule = index => {
let newArrayRule = [...rules];
newArrayRule.splice(index, 1);
setRules(newArrayRule);
};

Элемент, выбранный для удаления, должен быть удален один. Не со всеми детьми до этого.

Answer 1

Почему бы вам не отфильтровать массив вместо того, чтобы сращивать его:

const removeChildRule = index => {
  let newArrayRule =rules.filter( r => r!= index );
  setRules(newArrayRule);
};