Как удалить элемент из массива после снятия флажка

Question

У меня есть несколько местоположений, при проверке конкретного местоположения я могу выдвинуть их в массив при проверке флажка, не удаляемого из массива

handleChange(e){
    if(e.target.checked){
        let selectedLocations = this.state.selectedLocations;
        selectedLocations.push({
            name: e.target.name,
            isActive: true
        });
        this.setState({
            selectedLocations: selectedLocations
        });
    }else{
        let selectedLocations = this.state.selectedLocations;

    }


}

{
 locations && locations.map((el, i) => {
   return (
         <div className="col-md-4">
         <div className="form-group">
         <input type="checkbox" value="true"  name={el.name} onChange={this.handleChange.bind(this)}/><label> &nbsp;{el.name} </label>
      </div>
  </div>
 )
})
}

Я хочу удалить из массива после снятия флажка с определенногоместо

Answer 1

Вы не должны пытаться изменить состояние, нажимая непосредственно в состояние.Я бы посоветовал попробовать что-то подобное, как показано ниже:

handleChange(e){
    if(e.target.checked){
        this.setState(({selectedLocations}) => ({
            selectedLocations: [...selectedLocations, {
            name: e.target.name,
            isActive: true
        }]
        }));
    } else {
        this.setState(({selectedLocations}) => ({
            selectedLocations: selectedLocations.filter((element) =>  (e.target.name !== element.name))
        }));
    }
}

Answer 2

Используйте функцию удаления lodash

handleCheckboxChange = (e, id) => {
  const { selected_ids } = this.props;
  let updated_selected_ids = [];
  if (e.target.checked) {
    updated_selected_ids = selected_ids.concat([id]);
  } else {
    updated_selected_ids = remove(selected_ids, n => n !== id);
  }
}

Если вы не хотите использовать lodash, вы также можете использовать метод filter .

handleCheckboxChange = (e, id) => {
  const { selected_ids } = this.props;
  let updated_selected_ids = [];
  if (e.target.checked) {
   updated_selected_ids = selected_ids.concat([id]);
 } else {
   updated_selected_ids = selected_ids.filter(function(n){ return n !== id })
}

Answer 3

Вы можете использовать .filter().Я предполагаю, что свойство name уникально, но вы также можете сохранить ключ, чтобы быть более точным:

this.setState({
  selectedLocations: selectedLocations.filter(l => l.name !== e.target.name)
});

Answer 4

Попробуйте передать индекс карты с помощью функции и отделить это значение индекса от массива.