Удалить элемент из массива состояний в React

История такова, что я смогу поместить Боба, Салли и Джека в коробку. Я тоже могу удалить из коробки. При снятии слота не остается.

people = ["Bob", "Sally", "Jack"]

Теперь мне нужно удалить, скажем, «Боб». Новый массив будет:

["Sally", "Jack"]

Вот мой компонент реакции:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

Здесь я покажу вам минимальный код, так как это еще не все (onClick и т. Д.). Ключевой частью является удаление, удаление, уничтожение «Боба» из массива, но removePeople()он не работает при вызове. Любые идеи? Я смотрел на это, но, возможно, я делаю что-то не так, поскольку использую React.

Чтобы удалить элемент из массива, просто выполните:

array.splice(index, 1);

В твоем случае:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

При использовании React никогда не следует напрямую изменять состояние. Если объект (или Array, который тоже является объектом) изменяется, вы должны создать новую копию.

Другие предлагали использовать Array.prototype.splice(), но этот метод изменяет массив, поэтому его лучше не использовать splice()с React.

Самый простой в использовании Array.prototype.filter()для создания нового массива:

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Вот небольшой вариант ответа Александра Петрова с использованием ES6

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

Используйте .spliceдля удаления элемента из массива. При использовании delete, индексы массива не будут изменены, но значение конкретного индекса будетundefined

Метод splice () изменяет содержимое массива, удаляя существующие элементы и / или добавляя новые элементы.

Синтаксис: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

Редактировать:

Как указал Джастин-Грант , как правило, никогда не изменяйте this.stateнапрямую, поскольку setState()последующий вызов может заменить произведенную вами мутацию. Относитесь this.stateк нему как к неизменному.

Альтернативой является создание копий объектов в this.stateи управление копиями, назначение их обратно с помощью setState(). Array#mapи Array#filterт. д. могут быть использованы.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Простой способ удалить элемент из массива состояний в React:

когда какие-либо данные удаляются из базы данных и обновляют список без вызова API, когда вы передаете удаленный идентификатор этой функции, и эта функция удаляет удаленные, записанные из списка

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

В некоторых ответах упоминалось использование «splice», которое, как сказал Ченс Смит, изменило массив. Я бы посоветовал вам использовать вызов метода «slice» (документ для «slice» здесь), который делает копию исходного массива.

Это очень просто: сначала вы определяете ценность

state = {
  checked_Array: []
}

Сейчас,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

Вы забыли использовать setState. Пример:

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

Но лучше использовать, filterпотому что он не мутирует массив. Пример:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

Redfer doc для получения дополнительной информации