Estoy tratando de encontrar la mejor manera de eliminar un elemento de una matriz en el estado de un componente. Dado que no debo modificar la variable this.state directamente, ¿hay una mejor manera (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 asistente de inmutabilidad update() de react-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 se desaconseja hacer referencia this.state dentro de 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 produzca 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 el ayudante de inmutabilidad
import update from 'immutability-helper' ... removeItem(index) { this.setState((prevState) => ({ data: update(prevState.data, {$splice: [[index, 1]]}) })) }Uso de propagación
function removeItem(index) { this.setState((prevState) => ({ data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)] })) } Tenga en cuenta que en cada instancia, independientemente de la técnica utilizada, this.setState() recibe una devolución de llamada, no una referencia de objeto al anterior this.state ;