如果已存在，则从数组中删除项目

Question

我通过检查具有唯一ID的复选框列表来向数组添加ID。如果用户再次单击复选框（取消选中），我想从数组中删除ID。如果ID已经存在，如何从数组中删除ID？

这是我编写的将ID添加到数组的函数

    addEvcToArray(id) {
        const stationId = {
            stationId: id
        }
        var evcIdArray = this.state.stationIdArray.concat(stationId);
        this.setState({ stationIdArray: evcIdArray })
    }

在当前系统中，如果用户再次单击该复选框，则会再次添加与该复选框相关的ID。

Answer 1

使用findIndex查看是否存在具有该stationId的索引。如果是这样，slice数组在该索引左右两边的两端将创建一个没有该元素的新数组：

addEvcToArray(id) {
  const { stationIdArray } = this.state;
  const index = stationIdArray.findIndex(({ stationId }) => stationId === id);
  if (index === -1) {
    this.setState({
      stationIdArray: [...stationIdArray, { stationId: id }]
    });
  } else {
    const slicedArr = [...stationIdArray.slice(0, index), ...stationIdArray.slice(index + 1)];
    this.setState({
      stationIdArray: slicedArr
    });
  }
}

或者，或者更少重复地使用条件运算符：

addEvcToArray(id) {
  const { stationIdArray } = this.state;
  const index = stationIdArray.findIndex(({ stationId }) => stationId === id);
  const newStationArray = index === -1
    ? [...stationIdArray, { stationId: id }]
    : [...stationIdArray.slice(0, index), ...stationIdArray.slice(index + 1)];
  this.setState({
    stationIdArray: newStationArray
  });
}