Javascript 如果项已存在，请从数组中删除该项

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

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

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

---

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

使用

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

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

要从数组中删除项，可以使用以下方法

addEvcToArray（id）{
const{stationIdArray}=this.state；
const index=stationIdArray.findIndex（（{stationId}）=>stationId==id）；
如果（索引==-1）{//未找到，则添加
this.setState（{stationDarray:[…stationDarray，{stationId:id}]}）；
}否则{//已存在，请删除
const updateArray=stationDarray.filter（s=>s.stationId！==id）
this.setState（{stationIdArray:updateArray}）；
}
}
检查元素是否存在，否则将其从数组中筛选出来，然后再将其设置为状态：

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

试试这个

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

        this.setState({ stationIdArray: newArr})
    }

不知道为什么会这样（我想我在你的帖子中读到了splice，但我可能错了）。无论如何，@grodzi OP使用react检测到拼接<应避免使用代码>拼接

，因为它会改变现有阵列<代码>切片应该改为使用，因为它不会变异。如此愚蠢，甚至无法读取标签，对此感到抱歉（我甚至在几分钟前回答了一篇使用setState的op帖子…）嗯，因为

切片

对

过滤器

的性能影响最小，我会使用

过滤器

，因为它更具可读性，也更易于推理。您希望使用相同的函数向数组中添加和删除id吗？