1

Tengo un formulario en ReactJs donde uso un "Useeffect" para traer los datos de una API en PHP nativo (funciona correctamente) en la cual lleno el vector y muestra la información en una tabla en bootstrap. Aquí muestro el código de el formulario y de la tabla:

<form   id="webFrmHistorialPadimientoactual">
              <h4>Padimiento actual:</h4>
                    <div className="input-group">  
                       <div className="form-group"> 
                   </div>  
                   <div className="form-group">
                         <label htmlFor="">Motivo de la consulta:</label> 
                        <textarea rows="3"  onChange={e=>motivoconsultachange(e.target.value)} value={txtMotivoconsulta || ''}  name="txtMotivoconsulta" id="txtMotivoconsulta" className="form-control" aria-describedby="helpId" size={50}  placeholder="Motivo consulta"></textarea>
                   </div>  
                       <div className="input-group">
                            <span className="input-group-btn">                                        
                          <button className="btn btn-success" onClick={agregarMotivoConsulta} aria-label="">Agregar Motivo de la consulta Padecimiento Actual</button>
                            &nbsp; 
                           </span>                                    
                     </div>  
              </div>
</form>

                 <table  className="table"  id="HistorialPadimientoactual">
                 <thead><h4>Motivos anteriores de consultas pasadas</h4>
                    <tr>
                        <th>Motivo</th> 
                        <th>Fecha</th> 
                    </tr>
                    </thead>
                        <tbody>
                              {padecimientoactualregistro.map(
                                 (padecimientoactualregistro)=>(
                                 <tr key={padecimientoactualregistro.Id_expediente}>
                                    <td>{padecimientoactualregistro.Motivo_consulta}</td>
                                     <td>{padecimientoactualregistro.Fecha_de_motivo}</td>   
                                  </tr>
                                      )   
                                   )
                             }                             
                     </tbody>
                </table>

El problema, me marca el siguiente error en la consola: Error en consola

Me muestra la información, pero, no entiendo cual es el problema (porque lo pone como un error). ¿Cómo resuelvo este problema?. Gracias y saludos.

1 respuesta 1

1

Aquí:

<tr key={padecimientoactualregistro.Id_expediente}>

Y en particular esta variable padecimientoactualregistro.Id_expediente parece tener id's repetidos, estos los asignas como key cada tr y React se queja porque no permite tener childrens (tr-table rows) con keys repetidos en un mismo elemento:

Warning encountered 2 children with the same key

Una forma de solucionarlo es usando la propiedad index del metodo map y concatenando su valor para cada key:

<tbody>
       {padecimientoactualregistro.map(
            (padecimientoactualregistro, index)=>(
                                 <tr key={padecimientoactualregistro.Id_expediente + index}>
                                    <td>{padecimientoactualregistro.Motivo_consulta}</td>
                                     <td>{padecimientoactualregistro.Fecha_de_motivo}</td>   
                                  </tr>
                                      )   
                                   )
                             }                             
</tbody>

Por supuesto hay mejores soluciones, depende de los requerimientos del proyecto.

3
  • Hola, g.4. Funciono. Espero entender correctamente esto. Entiendo que si las llaves son únicas y vienen de la BD. Solo que en este caso son tablas "detalle" es decir, no tienen una ID único, estos se puede repetir. Por ejemplo: el ID del historial se puede repetir "N" veces en el detalle (si, se pueden usar como una llave primaria, pero, esta no se genera automáticamente en el detalle). Entonces, ¿"index" lo que hace es asignar a c/u de los campos como llave el campo que le asigne como "key" para evitar su "redundancia"?. Gracias, y saludos.
    – Saulo
    Commented el 13 jul. 2023 a las 16:18
  • En efecto, lo que hiciste fue componer un nuevo id simplemente concatenando el valor de index con el valor que viene de BD, por ejemplo si tu primer ID detalle es 2 y usas el index, el primer valor de index es 0, entonces concatenas y la composicion queda 2 + 0 = 20y 20 queda asignado como key, luego suponiendo el siguiente ID detalle tambien es 2, pero el valor de index ya sube y es 1, concatenando queda 2 + 1 = 21entonces el key queda como 21 y ya no se repite y asi sucesivamente...saludos
    – g.4
    Commented el 13 jul. 2023 a las 19:42
  • Cuando digo que el valor de index sube me refiero a que esta sucediendo dentro de una iteracion efectuada por el metodo map para cada elemento padecimientoactualregistro
    – g.4
    Commented el 13 jul. 2023 a las 19:54

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.