Как установитьState для обновления массива в React?

Question

Мне нужно обновить массив в состоянии моего компонента в React.Я видел несколько тем с этим вопросом, но до сих пор все они добавляют новые элементы в массив с помощью оператора распространения, но мне нужно добавить ИЛИ удалить элементы при обратном вызове, например:

  handleCheck (newStatus, isChecked) {
    this.setState({ filterStatus: [...this.state.filterStatus, newStatus] })
  }

Но проблема здесь в том, что он не работал для состояния, когда логическое значение isChecked сбрасывается для удаления их из массива

Каков наилучший способ добавления или удаления элементов из этого массива, надеемся, с помощью оператора распространения?

Спасибо

Answer 1

попробуйте использовать .filter для удаления элемента.Не забудьте продублировать массив (используя синтаксис [...array]) перед использованием .filter, чтобы не изменять исходный массив:

handleCheck (newStatus, isChecked) {
    let newArray = isChecked? // if isChecked is true
        [...this.state.filterStatus, newStatus] : // add element
        [...this.state.filterStatus].filter(e => e !== newStatus); // remove the elements that are equal to newStatus
    this.setState({ filterStatus: newArray})
}

Answer 2

Думайте, что это функционал!

const prevArray = this.state.array;
const itemsToAdd = [item, item, item];

//this function map the prev array escaping elements to remove 
//and then push itemsToAdd to the new array
const updateArray = ( i = [0], newArray = [] ) => 
  i < prevArray ? 
    yourRemovingCondition(prevArray[i]) ? 
      updateArray( i + 1, newArray ) 
    : updateArray( i + 1, [...newArray, prevArray[i])
  : [...newArray, ...itemsToAdd]
;

setState({array: updateArray()];

Answer 3

Поставьте галочку, добавляйте элемент только тогда, когда bool isChecked имеет значение true, в противном случае используйте filter для удаления элемента из массива.

Вот так:

handleCheck (newStatus, isChecked) {
    this.setState(prevState => { 
        let filterStatus;
        if (isChecked) {
            filterStatus = [...prevState.filterStatus, newStatus];
        } else {
            filterStatus = prevState.filterStatus.filter(el => el.id !== newStatus.id)
        }
        return { filterStatus }
    })
}

Примечание: Вместо идентификатора в методе обратного вызова фильтра используйте правильное уникальное имя свойства.