Removendo o elemento da matriz no estado do componente

Estou tentando encontrar a melhor maneira de remover um elemento de uma matriz no estado de um componente. Como não devo modificar a this.statevariável diretamente, existe uma maneira melhor (mais concisa) de remover um elemento de uma matriz do que o que tenho aqui?

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

Obrigado.

Atualizada

Isso foi atualizado para usar o retorno de chamada em setState. Isso deve ser feito ao fazer referência ao estado atual durante a atualização.

A maneira mais limpa de fazer isso que eu já vi é com filter:

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

Você pode usar o update()auxiliar de imutabilidadereact-addons-update , que efetivamente faz a mesma coisa sob o capô, mas o que você está fazendo está bem.

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

Acredito que a referência this.statedentro de setState()é desencorajada (as atualizações de estado podem ser assíncronas ).

Os documentos recomendam o uso setState() com uma função de retorno de chamada para que prevState seja passado em tempo de execução quando a atualização ocorrer. Então é assim que ficaria:

Usando Array.prototype.filter sem ES6

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

Usando Array.prototype.filter com funções de seta do ES6

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

Usando auxiliar de imutabilidade

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

Usando Spread

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

Observe que em cada instância, independentemente da técnica usada, this.setState()é transmitido um retorno de chamada, não uma referência de objeto ao antigo this.state;

Aqui está uma maneira de remover o elemento da matriz no estado usando a sintaxe de expansão ES6.

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

Quero entrar aqui, mesmo que essa pergunta já tenha sido respondida corretamente por @pscl , caso alguém o mesmo problema que eu. Dos 4 métodos, optei por usar a sintaxe es6 com funções de seta devido à sua concisão e falta de dependência de bibliotecas externas:

Usando Array.prototype.filter com funções de seta do ES6

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

Como você pode ver, fiz uma pequena modificação para ignorar o tipo de índice ( !==para!= ) porque no meu caso eu estava recuperando o índice de um campo de string.

Outro ponto útil se você estiver vendo um comportamento estranho ao remover um elemento no lado do cliente é NUNCA usar o índice de uma matriz como a chave do elemento :

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

Quando o React difere do DOM virtual em uma alteração, ele analisa as chaves para determinar o que mudou. Portanto, se você estiver usando índices e houver um a menos na matriz, ele removerá o último. Em vez disso, use os IDs do conteúdo como chaves, assim.

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

O acima é um trecho de desta resposta de um post relacionado .

Feliz codificação para todos!

Você pode usar esta função, se desejar remover o elemento (sem índice)

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

Como mencionado em um comentário à resposta de ephrion acima, filter () pode ser lento, especialmente com matrizes grandes, pois ele procura um índice que parece já ter sido determinado. Esta é uma solução limpa, mas ineficiente.

Como alternativa, pode-se simplesmente "cortar" o elemento desejado e concatenar os fragmentos.

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

Espero que isto ajude!

Você pode tornar o código mais legível com uma função auxiliar de uma linha:

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

então use-o assim:

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

Apenas uma sugestão: no seu código, em vez de usar, let newData = prevState.datavocê pode usar o spread, que é introduzido no ES6, ou seja, você pode usarlet newData = ...prevState.data para copiar a matriz

Três pontos ... representam operadores de expansão ou parâmetros de repouso ,

Ele permite que uma expressão ou string de matriz ou qualquer coisa que possa ser iterativa seja expandida em locais onde são esperados zero ou mais argumentos para chamadas de função ou elementos para matriz.

Além disso, você pode excluir o item da matriz com os seguintes

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

Espero que isso contribua !!

Aqui está uma maneira simples de fazer isso:

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

Espero que ajude!!!