Question

state = { filters: ['all'] }


this.state.filters.includes('humans') ? 
    this.state.filters.filter(val => val !== 'humans') : this.state.filters.push(dropdown)

我使用的条件是，当我单击一个按钮时，该项目（“人类”）被推到状态，而当我再次单击同一按钮时，我需要从该项目中删除该项目（“人类”）。数组。推送正常运行，我需要移除它的帮助。我像上面的代码一样使用过滤器，它不会再次添加到数组中，但也不会删除。预先感谢。

Answer 1

要从数组中删除元素，您可以执行以下操作

filters.splice(index_of_the_val, 1);

Answer 2

使用：

let index = this.state.filters.indexOf('humans');
if (index !== -1)
   this.state.filters.splice(index, 1);

或者您最好在React中对avoid mutating the state采用这种方法：

let array = [...this.state.filters]; // make a separate copy of the array
let index = array.indexOf('humans')
if (index === -1) { // not in the array
   array.push('humans');
   this.setState({filters: array});
} else { // exists in the array
   array.splice(index, 1);
   this.setState({filters: array});
}

Answer 3

您不应通过推送来修改状态，因为它可能不会触发重新渲染。您应该使用setState方法。

toggleFilter = filter => {
  const isIncluded = this.state.filters.includes(filter)

  const add = (filters, filter) =>
    filters.concat(filter)

  const remove = (filters, filter) =>
    filters.filter(f => f !== filter)

  this.setState(prevState => ({ 
    filters: isIncluded 
               ? remove(prevState.filters, filter)
               : add(prevState.filters, filter)
  }))
}

从数组中删除特定元素

3 个答案: