Tengo este código (resumido) en react:
this.state = {
gallery: null, //Proviene de la base de datos, entre entre sus claves posee un array "collaborators"
collaboratorsToDelete : [] //Colaboradores a borrar
}
deleteCollaborator = (event) => { //Función que borra un colaborador cuando se le hace click
const toDelete = event.target.innerHTML; //Guardo el colaborador seleccionado (es un <p/>)
const index = this.state.gallery.collaborators.indexOf(toDelete); //Busco el índice
let galleryAux = this.state.gallery; //Creo una variable auxiliar de 'gallery'
// console.log(this.state.gallery.collaborators[index]) //AQUÍ TODO BIEN
galleryAux.collaborators.splice(index, 1); //Elimino el colaborador
// console.log(this.state.gallery.collaborators[index]) //AQUÍ TODO MAL
this.setState({
gallery : galleryAux, //Reemplazo mi estado por el nuevo valor
collaboratorsToDelete : [...this.state.collaboratorsToDelete, toDelete]
})
}
Cuando utilizo el metodo splice()
para eliminar de mi variable auxiliar el colaborador, noto que no sólo se borra en mi variable auxilir, sino también directamente en el estado, ¡¿por qué ocurre esto?!.
En el primer console.log()
imprimo el valor correcto, pero en el segundo puedo notar cómo también se aplica el cambio al estado y me imprime la siguiente posición (si es que la hay, sino sale undefined
).