如何使用setState在React中更新数组？

Question

我需要在React中的组件状态下更新一个数组。 我已经看到了与此问题相关的几个主题，但是到目前为止，所有这些主题都是使用传播运算符将新项目添加到数组中的，但是我需要像这样在回调中添加或删除项目：

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

但是这里的问题是，对于isChecked布尔值为false的状态，将其从数组中删除是无效的。

最好是希望使用传播算子从该数组中添加或删除项目的最佳方法是什么？

谢谢

Answer 1

尝试使用.filter删除元素。 请记住，在使用.filter之前，请复制数组（使用[...array]语法），以免更改原始数组：

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

进行检查，仅在bool isChecked为true时添加元素，否则使用过滤器从数组中删除元素。

像这样：

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 }
    })
}

注意：在过滤器回调方法中，请使用正确的唯一属性名称代替id。

Answer 3

认为它功能正常！

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()];