Удаление элемента из массива в состоянии компонента

Я пытаюсь найти лучший способ удалить элемент из массива в состоянии компонента. Поскольку мне не следует изменять this.stateпеременную напрямую, есть ли лучший (более краткий) способ удалить элемент из массива, чем тот, который у меня здесь ?:

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

Спасибо.

обновленный

Это было обновлено для использования обратного вызова в setState. Это следует делать при обращении к текущему состоянию при его обновлении.

Самый чистый способ сделать это, что я видел, - это filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

Вы можете использовать update()помощник неизменяемости fromreact-addons-update , который фактически делает то же самое под капотом, но то, что вы делаете, нормально.

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

Я считаю, что ссылки this.stateвнутри setState()не рекомендуется ( обновления состояния могут быть асинхронными ).

Документы рекомендуют использовать setState()с функцией обратного вызова, чтобы prevState передавался во время выполнения, когда происходит обновление. Вот как это будет выглядеть:

Использование Array.prototype.filter без ES6

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

Использование Array.prototype.filter с функциями стрелок ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

Использование неизменяемости-помощника

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

Использование спреда

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Обратите внимание, что в каждом экземпляре, независимо от используемой техники, this.setState()передается обратный вызов, а не ссылка на старый объект this.state;

Вот способ удалить элемент из массива в состоянии с использованием синтаксиса распространения ES6.

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

Я хочу поговорить здесь, хотя на этот вопрос уже был правильно дан ответ от @pscl на случай, если кто-то еще столкнется с той же проблемой, что и я. Из 4 предложенных методов я решил использовать синтаксис es6 со стрелочными функциями из-за его краткости и отсутствия зависимости от внешних библиотек:

Использование Array.prototype.filter с функциями стрелок ES6

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

Как видите, я сделал небольшую модификацию, чтобы игнорировать тип индекса ( !==чтобы!= ), потому что в моем случае я получал индекс из строкового поля.

Еще один полезный момент, если вы видите странное поведение при удалении элемента на стороне клиента, - НИКОГДА не использовать индекс массива в качестве ключа для элемента :

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

Когда React отличается от виртуальной DOM при изменении, он будет смотреть на ключи, чтобы определить, что изменилось. Поэтому, если вы используете индексы, а в массиве на один меньше, он удалит последний. Вместо этого используйте идентификаторы контента в качестве ключей, как это.

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

Вышеупомянутая выдержка из этого ответа из соответствующего сообщения .

Всем удачного кодирования!

Вы можете использовать эту функцию, если хотите удалить элемент (без индекса)

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

Как упоминалось в комментарии к ответу ephrion выше, filter () может работать медленно, особенно с большими массивами, поскольку он выполняет цикл для поиска индекса, который, по-видимому, уже определен. Это чистое, но неэффективное решение.

В качестве альтернативы можно просто «вырезать» нужный элемент и объединить фрагменты.

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

Надеюсь это поможет!

Вы можете сделать код более читаемым с помощью однострочной вспомогательной функции:

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

затем используйте его так:

this.setState(state => ({ places: removeElement(state.places, index) }));

Просто предложение, в вашем коде вместо использования let newData = prevState.dataвы можете использовать распространение, представленное в ES6, то есть вы можете использоватьlet newData = ...prevState.data для копирования массива

Три точки ... обозначают операторы распространения или параметры отдыха ,

Он позволяет раскрывать выражение массива или строку или что-либо, что может повторяться в местах, где ожидается ноль или более аргументов для вызовов функций или элементов для массива.

Кроме того, вы можете удалить элемент из массива следующим образом:

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Надеюсь, это поможет !!

Вот простой способ сделать это:

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

Надеюсь, поможет!!!