Удалить элемент из массива, если он уже существует

Question

Я добавляю идентификаторы в массив, проверяя список флажков, которые имеют уникальные идентификаторы. Я хочу удалить идентификатор из массива, если пользователь снова нажимает на флажок (снимите флажок). Как удалить идентификатор из массива, если идентификатор уже существует?

Это функция, которую я написал для добавления идентификаторов в массив

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

С текущей системой, еслипользователь снова нажимает на флажок, идентификатор, связанный с флажком, добавляется снова.

Answer 1

Вы можете сначала проверить, существует ли элемент или нет, а затем добавить или удалить элемент.

Чтобы удалить элемент из массива, вы можете использовать метод 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 2

Используйте 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 3

Попробуйте это

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

        this.setState({ stationIdArray: newArr})
    }

Answer 4

Проверьте, существует ли элемент, иначе отфильтруйте его из массива, прежде чем снова установить его в состояние:

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