Eliminar elemento de la matriz en estado componente

Estoy tratando de encontrar la mejor manera de eliminar un elemento de una matriz en el estado de un componente. Como no debería modificar la this.statevariable directamente, ¿hay una forma mejor (más concisa) de eliminar un elemento de una matriz que la que tengo aquí ?:

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

Gracias.

actualizado

Esto se ha actualizado para usar la devolución de llamada en setState. Esto debe hacerse al hacer referencia al estado actual mientras se actualiza.

La forma más limpia de hacer esto que he visto es con filter:

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

Podría usar el update()ayudante de inmutabilidadreact-addons-update , que efectivamente hace lo mismo debajo del capó, pero lo que está haciendo está bien.

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

Creo que no se recomienda hacer referencia al this.stateinterior setState()( las actualizaciones de estado pueden ser asincrónicas ).

Los documentos recomiendan usar setState()con una función de devolución de llamada para que se pase prevState en tiempo de ejecución cuando se produce la actualización. Así es como se vería:

Usando Array.prototype.filter sin ES6

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

Uso de Array.prototype.filter con funciones de flecha ES6

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

Usando inmutability-helper

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

Tenga en cuenta que en cada caso, independientemente de la técnica utilizada, this.setState()se pasa una devolución de llamada, no una referencia de objeto a la anterior this.state;

Aquí hay una manera de eliminar el elemento de la matriz en el estado utilizando la sintaxis de propagación ES6.

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

Quiero intervenir aquí aunque @pscl ya haya respondido correctamente a esta pregunta en caso de que alguien más se encuentre con el mismo problema que yo. De los 4 métodos proporcionados, elegí usar la sintaxis es6 con funciones de flecha debido a su concisión y falta de dependencia de bibliotecas externas:

Uso de Array.prototype.filter con funciones de flecha ES6

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

Como puede ver, hice una ligera modificación para ignorar el tipo de índice ( !==a !=) porque en mi caso estaba recuperando el índice de un campo de cadena.

Otro punto útil si está viendo un comportamiento extraño al eliminar un elemento en el lado del cliente es NUNCA usar el índice de una matriz como la clave para el elemento :

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

Cuando React difiere con el DOM virtual en un cambio, observará las claves para determinar qué ha cambiado. Entonces, si está utilizando índices y hay uno menos en la matriz, eliminará el último. En su lugar, use las identificaciones del contenido como claves, como esta.

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

Lo anterior es un extracto de esta respuesta de una publicación relacionada .

¡Feliz codificación para todos!

Puede usar esta función, si desea eliminar el elemento (sin índice)

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

Como se mencionó en un comentario a la respuesta de ephrion anterior, filter () puede ser lento, especialmente con matrices grandes, ya que realiza un bucle para buscar un índice que parece haber sido determinado ya. Esta es una solución limpia pero ineficiente.

Como alternativa, uno simplemente puede 'cortar' el elemento deseado y concatenar los fragmentos.

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

¡Espero que esto ayude!

Puede hacer que el código sea más legible con una función auxiliar de una línea:

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

luego úsalo así:

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

Solo una sugerencia, en su código, en lugar de usar let newData = prevState.data, podría usar propagación, que se introduce en ES6, que puede usarlet newData = ...prevState.data para copiar la matriz

Tres puntos ... representa operadores de dispersión o parámetros de descanso ,

Permite que una expresión de matriz o cadena o cualquier cosa que pueda iterarse se expanda en lugares donde se esperan cero o más argumentos para llamadas a funciones o elementos para matriz.

Además, puede eliminar el elemento de la matriz con los siguientes

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

Espero que esto contribuya !!

Aquí hay una manera simple de hacerlo:

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 eso ayude!!!