0

Hola estoy a punto de terminar la sgte aplicacion y me he tomado con algo inesperado. Explicacion del problema: al entrar a la app, se muestran 3 usuarios, al cambiar la imagen de cualquiera de estos, aparece una camara que es un input file que sirve para actualizar la imagen, aparece tanto en la imagen de usuario y en el fondo de usuario.

Entonces cuando se carga una nueva imagen, esta se reemplaza con la actual, al eliminar esa card user teniendo consigo una camara en la imagen de usuario o fondo o si se ha modificado la imagen con una nueva imagen de usuario o fondo, tanto la camara o la nueva imagen pasan a la card user que esta despues de la card user eliminada.

Ejm más claro por si no se entendio lo de arriba: Al usuario Aristide se cambia su imagen por una nueva, entonces decido eliminar a Aristide, ahora cuando es eliminado, Lara María hereda la imagen nueva de Aristide y aparece de igual manera la camara. ¿Por que sucede esto? . A continuacion el codigo donde renderizo la card user:

import React, { useState } from 'react';
import Icon from '../assets/Icon';
import LoadImage from '../assets/LoadImage';
import Swal from 'sweetalert2';

const ListFriendships = props => {
  const {
    fondoImagen,
    imagenUsuario,
  } = props,

    /* Mostrar camara */
    [showCamera, setShowCamera] = useState(false),

    /* Cambiar icono de editar y check */
    [edit, setEdit] = useState(false),

    /* Capturando la actual img de usuario */
    [actualUserImg, setActualUserImg] = useState(''),

    /* Capturando la actual img de fondo */
    [actualBackgroundImg, setActualBackgroundImg] = useState(''),

    loadImage = e => {
      const { name } = e.target,
        file = e.target.parentElement.querySelector('input[type="file"]').files[0], reader = new FileReader();
      reader.addEventListener('load', () => {
        if (name === 'userImg') {
          setActualUserImg(reader.result);
        } else {
          setActualBackgroundImg(reader.result);
        }
      }, false)
      file && reader.readAsDataURL(file);
    };

  return (
    <div className="person">

      <article className="image-person">

        <img className="background-image" src={!actualBackgroundImg ? `${process.env.PUBLIC_URL}/${fondoImagen}` : actualBackgroundImg} alt="background" />

        {showCamera
          ? <LoadImage
            onChange={e => {
              loadImage(e);
            }}
            name="backgroundImg"
            id="file"
          />
          : null}

      </article>

      <article className="name-person">
        {!edit
          ? <Icon title="Editar" className="fas fa-edit"
            onClick={() => {
              setShowCamera(true);
              setEdit(true);
            }} />
          : <Icon title="Aplicar cambios" className="fas fa-check" onClick={() => {
            confirmLoadImage();
          }} />
        }
        <Icon title="Eliminar" className="fas fa-trash" onClick={() => {
          Swal.fire({
            icon: 'warning',
            iconColor: '#BBB45B',
            html: `<h3 id="messageForDeleteFriend">¿Estás seguro(a) que deseas eliminar a ${nombreDeUsuario}?</h3>`,
            background: 'rgba(0,0,0,0.85)',
            showDenyButton: true,
            confirmButtonText: `Eliminar`,
            denyButtonText: `Descartar`,
            confirmButtonColor: '#A80000',
            denyButtonColor: 'rgba(255,255,255,0.15)',
          }).then((result) => {
            if (result.isConfirmed) {
              props.deleteFriendship();
              props.showFriendsDelete();
            } else if (result.isDenied) {
              return null;
            }
          })
        }} />
        <figure>
          <img src={!actualUserImg ? `${process.env.PUBLIC_URL}/${imagenUsuario}` : actualUserImg} alt={nombreDeUsuario} title={nombreDeUsuario} onClick={() => showModal()} />

          {showCamera
            ? <LoadImage
              onChange={e => {
                loadImage(e);
              }}
              name="userImg"
              id="file1"
            />
            : null}

        </figure>
      </article>
    </div>
  )
};

export default ListFriendships;

Estoy usando SweetAlert para generar los mensajes de confirmacion para eliminar un card user, la verdad no entiendo porque sigue manteniendo el estado de [showCamera, actualUserImg, actualBackgroundImg] en la anterior tarjeta de la tarjeta que es eliminada. El componente <LoadImage /> solo me genera la camara:

const LoadImage = props => {
  const {onChange, id, name} = props;
  return (
    <div className="edit-image">
      <input onChange={onChange} name={name} type="file" id={id} accept="image/*" />
      <label htmlFor={id} className="load-image"></label>
    </div>
  )
}

export default LoadImage;

Ahora el componente que renderiza cada card user, lo renderizo en el sgte componente:

import React, { useState } from 'react';
import './css/styles.css';

/* Components */
import ListFriendships from './ListFriendships';

/* JSON */
import friendships from '../json/friendships';

const Friendship = () => {

  const [person, setPerson] = useState(friendships);

  const deleteCardPerson = (x, index) => {
    const newState = x.filter((e, i) => {
      return i !== index;
    });
    setPerson(newState);
  }

  return (

    <div id="container">

      <section id="friendships">
        <h3>Tu lista de amistades :</h3>
        <div id="content-person">
          {person.map((x, index) => (
              <ListFriendships
                key={index}
                fondoImagen={x.fondoImagen}
                imagenUsuario={x.imagenUsuario}
        
                index={index}

                deleteFriendship={() => deleteCardPerson(person, index)}
                showFriendsDelete={() => showFriendsDelete(x)}
              />
            ))
          }
        </div>
      </section>

    </div>
  )
}

export default Friendship;

Agradeceria mucho su ayuda. Es lo ultimo que me falta solucionar para terminar la app y empezar a aprender nuevas cosas. A continuacion dejo los componentes en el sgte github.

1 respuesta 1

2

Te pasa eso, debido a la key que le asocias a cada ListFriendships:

<ListFriendships
    key={index}
    ...

El index del array no es un elemento único de cada objeto del array, es la posición del elemento en el array, entonces al quitar un elemento del array, cuando vuelve a renderizar, no vincula correctamente cada index con sus props.

Quizá alguien sabe dar una explicación mas técnica.

Puedes solucionar esto, asigandole un id único a cada persona, por ejemplo 1,2 y 3 en el json:

{
    "id": 1,
    "fondoImagen": "img/background-image.jpg",
    "imagenUsuario": "img/users/user-1.jpg",
    ...

Y utilizando este id en vez del index como key:

<ListFriendships
    key={x.id}
    ...
1
  • Muchas gracias Tassio, la verdad nunca pense que el problema era por la key, pero haciendo unos test pude comprobar que lo que dices es correcto !!
    – Husdady
    Commented el 17 feb. 2021 a las 23:03

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.