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

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

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 say it Bob.
  delete array[index];
},

...

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let say it 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
  })
},

Ответ 8

Это очень просто, сначала вы определяете значение

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

Ответ 9

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

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