0

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

4 respuestas 4

0

Lo que pasa es que los array y los objetos en JS son tratados por referencia (esto quiere decir que comparten la misma dirección de memoria).

Por ejemplo y creo que es lo que sucede en tu problema:

a = [1,2,3];
b = a;
b.splice(0,1)
console.log(a)
// [2, 3]

Y como efecto secundario no deseado, estas actualizando el state de tu componente de una forma no recomendada.

Si galleryAux es un array de 1 dimensión puedes clonarlo de forma segura usando [...galleryAux] si es un array de más de una dimensión o contiene objetos, debes utilizar algun mecanismo que clone recursivamente los elementos, uno muy popular es el que viene el lodash (no lo recomiendo por su peso) o clone.

1
  • galleryAux es un objeto (un modelo de mi base de datos) que contiene las propiedades photos (array), description (String) y collaborators (array), no podría usar el spread operator para copiarlo de forma directa. Podría hacer algo como: let collaborators = this.state.gallery.collaborators, luego collaborators.splice(index, 1) y para finalizar this.setState({ [gallery.collaborators] : collaborators}) pero no sé si esto es posible Commented el 16 jun. 2020 a las 3:22
0

El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

Pensando seriamente en lo que usted está queriendo hacer, creo que no está comprendiendo el alcance total de la herramienta que está usando.

const targets = [ 'a', 'b', 'c' ];
const indexToDelete = 2; // c
targets.splice(indexToDelete, 1);

console.log(targets[indexToDelete]) // undefined.
// Si borras el último elemento, no encontrarás ese index
// Si borras un índice asociativo, tampoco podrás buscarlo de vuelta
console.log(targets) // [ 'a', 'b' ]

Ahora que entiende lo que le digo...

    const collaborators = gallery.collaborators.filter(item => item !== 'a')
    this.setState({
        gallery : { ...galery, collaborators },
        collaboratorsToDelete : [...]
    })

Tenga en cuenta que su index podría ser -1 si no está haciendo el cálculo correcto. Tome en consideración que innerHTML no sería la forma correcta de tener un array de objetos, usted está tomando una referencia del arbol DOM, junto con sus hijos.

event.target.value // <input>
event.target.textContent // <a>, <p>... etc.
3
  • Pero en el: this.setState({ gallery : gallery.collaborators.splice(index, 1), collaboratorsToDelete : [...this.state.collaboratorsToDelete, toDelete] }) yo estaría reemplazando todo mi objeto gallery (que es un modelo con tres propiedades, entre ellas collaborators) por collaborators sólo, y no es lo que quiero. Yo solamente quiero cambiar la propiedad collaborators de mi objeto gallery, pero no sé qué forma utilizar para acceder a una sola propiedad de un estado. ¿se puede utilizar algo como this.setState({ [gallery.collaborators] : collaborators}) ? Commented el 16 jun. 2020 a las 3:27
  • Otra cosa que añadir, el método splice retorna el valor que ha removido, ¿mi estado gallery no estaría tomando ese valor único? Commented el 16 jun. 2020 a las 3:29
  • Use '...' para copiar el array, y reasigne la propiedad, edité el ejemplo que estaba para responder su duda. Commented el 16 jun. 2020 a las 3:49
0

Encontré esta solución, por favor díganme qué les parece:

this.state = {
            gallery: null,  //Es un objeto, 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 = JSON.parse(JSON.stringify(this.state.gallery)); //Solución encontrada
        // Esta vez utilizo JSON.parte y stringify
        // para hacer una copia del elemento y no de la referencia


        // 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Í SIGUE TODO BIEN

        this.setState({
            gallery : galleryAux, //Reemplazo mi estado por el nuevo valor
            collaboratorsToDelete : [...this.state.collaboratorsToDelete, toDelete]
        })
    }
0

El uso de:

let galleryAux = JSON.parse(JSON.stringify(this.state.gallery));

Para clonar la variable sin modificar el state original. Funcionó correctamente para mí. Tal como lo respondió Brian Herrera

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.