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

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

Answer 2

您可以先检查该项目是否存在，然后添加或删除该项目。

要从数组中删除项目，您可以使用filter方法。

  addEvcToArray(id) {
    const { stationIdArray } = this.state;
    const index = stationIdArray.findIndex(({ stationId }) => stationId === id);
    if (index === -1) { //not found, add
      this.setState({ stationIdArray: [...stationIdArray, { stationId: id }]});
    } else { //already exists, remove
      const updatedArray = stationIdArray.filter(s => s.stationId !== id)
      this.setState({stationIdArray: updatedArray});
    }
  }

Answer 3

检查元素是否存在，否则在将其重新设置为状态之前将其从数组中过滤掉：

function addEvcToArray(id) {
  const stationId = {
    stationId: id,
  };
  if (
    !this.state.stationArray.find(element => element.stationId === id) // returns the object otherwise undefined
  ) {
    const evcIdArray = this.state.stationIdArray.concat(stationId);
    this.setState({ stationIdArray: evcIdArray });
  } else {
    this.setState({
      stationIdArray: stationIdArray.filter(
        element => element.stationId !== stationId, // returns an array with all values except current stationId
      ),
    });
  }
}

Answer 4

尝试这个

addEvcToArray(id) {
         let newArr=[]
        const { stationIdArray } = this.state;
        let filtered = stationIdArray.filter(filt=> filt.stationId!==id)
          newArr = [...filtered , {stationId:id}];

        this.setState({ stationIdArray: newArr})
    }