0

Me ayudan, por favor? tengo dos componentes hermanos, uno que muestra los comentarios de cada estado y otro donde puedo agregar un comentario al estado correspondiente.

componente <Estados> el componente estados recibe la lista de estados desde su padre y la renderiza en el hook currentEstado, este tiene dos componentes hijos que hacen la función de mostrar los comentarios asociados a el estado y escribir el comentario asociado al estado

const Estados = (props) => {
    const [estadosState, setCurrentEstado] = useState(props.estados)
    const addComentario = (comentario, id) => {
       estadosState.map(e =>{
            if(e.id == id) {
                e.comentariosEstado.push(comentario)
            }
        })
    }
return (
        <Fragment>
            <h2> lista</h2>
            <ul>
                {
                    estadosState.length > 0 ?
                    estadosState.map((item, index) =>
                            <li key={index}>
                                {item.estado}
                                <Comentarios comentarios={item.comentariosEstado}>
                                </Comentarios>
                                <EscribirComentarios
                                    id={item.id}
                                    addComentario={addComentario}>

                                </EscribirComentarios>

                            </li>
                        ) : (
                            <h2>No hay comentarios aún {props.estados.length}</h2>
                        )
                }
            </ul>
        </Fragment>

    );
} 

tengo el componente <comentarios> este componente me ayuda a renderizar los comentarios asociados a cada estado, en una iteración realizada previamente en el componente padre <Estados>

const Comentarios = (props) => {
    console.log('comentarios', props.comentarios)
    return (
        <Fragment>
            <ul>
                {
                props.comentarios.map((comentario, index) => 
                    <li key={index}>
                        <small>{comentario.nombre}</small>
                        <p>{comentario.comentario}</p>
                    </li>
                )
                }
            </ul>
        </Fragment>
    )
}

Y tengo el componente <escribir-comentario> Este componente no es más que un formulario que manda un comentario y en el método addComentario() se le agrega la lógica, y listo. en teoría funciona porque se agregan estados, y se visualizan, pero cuando voy a agregar un comentario asociados a un estado, el en el log funciona, hace el push a la lista, pero no el componente <Comentarios> no me renderiza la lista completa, quisiera que me ayudaran con este tema, yo creo que es porque no uso el concepto de hooks correctamente, pero soy nuevo en esto.

Gracias.

  const EscribirComentarios = (props) => {

   const { handleSubmit, register } = useForm();
   const onSubmit = (data, e) => {
       props.addComentario(data, props.id)
       //limpiar campos
       e.target.reset();

   }
   return( 
       <React.Fragment>
           <form onSubmit={handleSubmit(onSubmit)} className="containerEscribirComentaro">
               <div className="InputEscribirComentario">
                   <input
                       name="comentario"
                       ref={
                           register({
                               required: { value: true, message: 'Comentario obligatorio' }
                           })
                       }
                   />
               </div>
               <div className="submitEscribirEstado">
                   <input
                       type="submit"
                       value="Comentar"
                   />
               </div>
           </form>
        </React.Fragment>
   )
}

EDITADO

Si, el componente padre no está interviniendo en el método de agregar comentarios al estado, este es el padre <app.js>

function App() {
  const estados = [
    {
      id: uuidv4(),
      nombre: 'Juan Rodriguez',
      estado: 'Este es un estado de información en ejemplo.',
      comentariosEstado: [
        { id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' },
        { id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' }
      ]
    },
    {
      id: uuidv4(),
      nombre: 'Martha Fernández',
      estado: 'Este es un estado de información en ejemplo 2.',
      comentariosEstado: [
        { id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Camilo' },
        { id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Luffy' }
      ]
    }
  ]
  const [estadosList, setEstadosList] = useState(estados)

  const armarEstados = (estado) =>{
    // después se genera un random para el estado.nombre.
    estado.id = uuidv4()
    estado.nombre = "Camilo F." 
    estado.comentariosEstado = [] 
  }

  const addEstado = (estado) => {
    // estado.id  = uuidv4()
    armarEstados(estado)
    setEstadosList([
      ...estadosList,
      estado
    ])
    
  }
  
  return (
    <React.Fragment>
      <EscribirEstados addEstado={addEstado}></EscribirEstados>
      <Estados estados={estadosList}></Estados>
    </React.Fragment>

  );
}
5
  • puedes agregar el componente padre ? necesito saber como están llegando los datos para poder ayudarte
    – Enzo
    el 26 dic. 2020 a las 21:11
  • entiendo que no este interviniendo, pero si yo te doy una solucion a tu problema puede que tengas que refactorizar codigo que no esta aca y eso llevaria a que vos preguntes otra vez, por eso necesito saber de donde vienen los datos para tener una idea mas clara de como poder resolver dicho problema
    – Enzo
    el 26 dic. 2020 a las 21:18
  • Listo, ya agregue el componente padre y como se genera el flujo completo. el 26 dic. 2020 a las 21:19
  • ok, estoy preparando una respuesta, en breve la estaré publicando
    – Enzo
    el 26 dic. 2020 a las 21:22
  • Dale, estoy pendiente. el 26 dic. 2020 a las 21:59

2 respuestas 2

0

Se vé que aún estas en etapa de desarrollo, pero con esta modificación podrás avanzar y seguir mejorando tu código.

Modifica la función addComentario del componente Estados de la siguiente forma:

const addComentario = (comentario, id) => {
             let copyObj = {   
                  id: uuidv4(), 
                  comentario: comentario.comentario, 
                  nombre: 'usuario en sesion' 
             }
             let copyEstados = estadosState.map(e =>{
                   if(e.id === id) {
                       e.comentariosEstado.push(copyObj);
                       return Object.assign({}, e, {comentariosEstado:e.comentariosEstado} )
                   } else {
                       return e;
                       }
                   })
             setCurrentEstado(copyEstados);
}

Ya habías creado una copia de todo el estado con map, solo se agregó el nuevo valor de la propiedad comentariosEstado para cada estado de información, es decir cada elemento de tu estado:

Object.assign({}, e, {comentariosEstado:e.comentariosEstado} )

Este nuevo valor es todo el array comentariosEstado, ya lo tenias listo cuando codificaste el push:

e.comentariosEstado.push(copyObj); 

Por último se complemento el nuevo objeto comentarios, con el nuevo id que se supone se debe generar y el usuario que se supone que está en sesión:

let copyObj = {   
                id: uuidv4(), 
                comentario: comentario.comentario, 
                nombre: 'usuario en sesion' 
              }

Finalmente se hace el re-render con la función setCurrentEstado y la nueva copia del Estado:

setCurrentEstado(copyEstados);

Recuerda importar el modulo uuid en el componente Estados.

2
  • Muchas gracias por las mejoras en el uso del código, eso era lo que me restaba por hacer, hacer el re render del hook con el props como propiedad. setCurrentEstado(copyEstados); el 27 dic. 2020 a las 22:14
  • Muy bien, si te ayudo la respuesta no olvides votar por ella, con esto el sitio se mantendrá bien documentado, saludos!
    – g.4
    el 27 dic. 2020 a las 22:52
0

el primer error que observo es como estas manejando el hook useState, no es buena practica que el dato del useState, valga la redundancia, venga directamente de los props, igualmente, en el componente <Estados/> no haria falta agregar un useState ya que los datos vienen directamente desde el padre, al componente <Estados/> yo lo haria de la siguiente manera

const Estados = props => {

const { estados } = props

const addComentario = (comentario, id) => {
  estados.map(e => {
    if (e.id == id) {
      e.comentariosEstado.push(comentario)
    }
  })
}

return (
  <Fragment>
    <h2>
      lista
    </h2>
    <ul>
      {estados.length > 0 ?  estados.map((item, index)=> 
        <li key={index}>
        {item.estado}
          <Comentarios comentarios={item.comentariosEstado} />
          <EscribirComentarios
            id={item.id}
            addComentario={addComentario}
          />
        </li>
        ): (
          <h2>
            No hay comentarios aún {estados.length}
          </h2>
        )}
    </ul>
  </Fragment>
);
} 

como podras ver, el atributo estados que estabas pasando al componente <Estados/> ya no hace falta guardarlo en el estado del componente, y quedaria un codigo mas limpio, ahora bien, estas diciendo que el problema es que no se muestran los datos a la hora de agregar un nuevo comentario, lo que yo haria es agregar un useEffect al componente padre, lo haria de esta forma

function App() {
  const estados = [
    {
      id: uuidv4(),
      nombre: 'Juan Rodriguez',
      estado: 'Este es un estado de información en ejemplo.',
      comentariosEstado: [
        { id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' },
        { id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' }
      ]
    },
    {
      id: uuidv4(),
      nombre: 'Martha Fernández',
      estado: 'Este es un estado de información en ejemplo 2.',
      comentariosEstado: [
        { id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Camilo' },
        { id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Luffy' }
      ]
    }
  ]
  const [estadosList, setEstadosList] = useState(estados)

  //simplemente hacemos que el componente se vuelva a renderizar cuando haya un cambio 
  //en el array de estados 
  useEffect(()=>{},[estadosList])

  const armarEstados = (estado) =>{
    // después se genera un random para el estado.nombre.
    estado.id = uuidv4()
    estado.nombre = "Camilo F." 
    estado.comentariosEstado = [] 
  }

  const addEstado = (estado) => {
    // estado.id  = uuidv4()
    armarEstados(estado)
    setEstadosList([
      ...estadosList,
      estado
    ])

  }

  return (
    <React.Fragment>
      <EscribirEstados addEstado={addEstado}></EscribirEstados>
      <Estados estados={estadosList}></Estados>
    </React.Fragment>
  );
}

de esa forma hacemos que cuando haya un cambio en la lista de estados, se vuelva a renderizar, puedes informarte mas sobre los hooks en la pagina oficial de react, son de mucha ayuda a la hora de usar componentes funcionales en react, otra cosa, cuando un componente no necesita hijos, puedes hacer unsa sola etiqueta

//esta porcion de codigo se puede simplificar de la sugiente manera 
return (
    <React.Fragment>
      <EscribirEstados addEstado={addEstado}></EscribirEstados>
      <Estados estados={estadosList}></Estados>
    </React.Fragment>
  );

return (
    <>
      <EscribirEstados addEstado={addEstado} />
      <Estados estados={estadosList} />
    </>
  );

espero que hayas poder solucionado tu problema, cualquier pregunta ya sabes

4
  • Hola, gracias, hice los cambios correspondientes y tomé nota de las mejoras en el código, pero de igual manera no renderiza bien la información, no sé si es porque se le está haciendo push al props, y no directamente esoy utilizando un método de hooks, por eso el useEffect(()=>{},[estadosList]) no renderiza en sí. el 26 dic. 2020 a las 22:46
  • el array de datos es estatico, eso va a quedar asi en la aplicacion o pensas traerlo desde un backend ?
    – Enzo
    el 26 dic. 2020 a las 23:00
  • Por ahora estoy utilizando el mock, pero después eso irá a un backend en node. De igual manera aún ando entendiendo como trabajar con hooks, y el cómo renderizo ese componente nieto el 26 dic. 2020 a las 23:42
  • estoy haciendo una muestra en codebox, ahorita paso link, cuando traigas los datos desdel el back, ten cuidado con los pre-renderizados, puede que tengas problemas de memoria si caes en un bug
    – Enzo
    el 26 dic. 2020 a las 23:44

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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