1

Tengo una tabla en JSX y quiero cargar una columna de manera dinamica pero no lo la muestra, se queda en blanco. Primero obtengo datos desde una api y los paso a un array, luego de todo el JSON obtenido paso los campos fecha y los paso a un array, y luego de ese mismo array elimino los repetidos, al parecer se agregan bien pero no muestra el resultado en la tabla.

Ejemplo de mi json

[
  {
    "codigo": 260,
    "nombre": "DANIEL H",
    "campo": 4,
    "cultivo": T1
    "mes": "Octubre",
    "fecha": "2021-10-25"
  },
  {
    "codigo": 123,
    "nombre": "JOSE LUIS",
    "campo": 1,
    "cultivo": T1
    "mes": "Octubre",
    "fecha": "2021-10-25"
  },
  {
    "codigo": 99,
    "nombre": "ANGEL",
    "campo": 1,
    "cultivo": T1
    "mes": "Octubre",
    "fecha": "2021-10-25"
  },
  {
   "codigo": 8,
    "nombre": "VIRIDIANA",
    "campo": 1,
    "cultivo": T1
    "mes": "Octubre",
    "fecha": "2021-10-25"
  },
  {
   "codigo": 260,
    "nombre": "DANIEL H",
    "campo": 4,
    "cultivo": "ZARZAMORA"
    "mes": "Octubre",
    "fecha": "2021-10-25"
  }
]

Como ven la fecha se repite y quiero que como tal 2021-10-25 sea el nombre de la columna, ya que eventualmente se añadiran mas fechas.

Aqui mi codigo:

import React, { useEffect, useState } from "react";
import Cookies from "universal-cookie";
import Contenedor from "../Contenedor.jsx";
import { makeStyles, Grid } from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import {
  getListProyeccionAction
} from "../../redux/Proyeccion/ProyeccionD";

import '../../css/index.css'

const Proyeccion = () => {
  const styles = useStyles();

  const cookies = new Cookies();
  const dispatch = useDispatch();

  const proyeccion = useSelector((v) => v.proyeccion.arrayProyeccion);

  var fechas = [];
 
  const getData = () => {
    dispatch(getListProyeccionAction(cookies.get("IdUser")));
    //Obtengo un JSON y lleno un array llamado fechas con todos los valores fecha de mi json
    
    for (const x of proyeccion) {
      fechas.push({
        fecha: x.fecha
      });
    }

//luego elimino las fechas duplicadas del mismo array
    var hash = {};
    fechas = fechas.filter(function (current) {
      var exists = !hash[current.id];
      hash[current.id] = true;
      return exists;
    });
    console.log(fechas.length);
  };



  useEffect(() => {
    getData();
  }, []);

  return (
    <div className={styles.root}>
      <Contenedor />
      <div className={styles.content}>
        <div className={styles.toolbar}></div>

        <section className="content">
          <div className="row">
   
                  {proyeccion.length > 0 ? (
                    <table
                      className="table table-hover"
                      style={{ fontSize: 11, textAlign: "center" }}
                    >
                      <thead className="thead-light">
                        <tr>
                          <th colspan={8}></th>
                          <th style={{ backgroundColor: "#B0C4DE" }} colspan={1}>Fechas de actualizaciones</th>
                        </tr>
                        <tr>
                          <th>Codigo</th>
                          <th>Nombre</th>
                          <th>Campo</th>
                          <th>Cultivo</th>
                          <th>Mes</th>
                          <th># Cambios</th>
                          <th>
                            {fechas.length > 0 ?
                              <>
                                {fechas.map((item) => (
                                  <React.Fragment key={item.fecha}>
                                    {item.fecha}
                                  </React.Fragment>
                                ))}
                              </>
                              :
                              null
                            }
                          </th>
                        </tr>
                      </thead>
                      <tbody style={{ backgroundColor: "white" }}>
                        {proyeccion.filter(searchData(search)).map((item) => (
                          <React.Fragment key={item.noMes}>
                            <tr>
                              <td>{item.codigo}</td>
                              <td>{item.nombre}</td>
                            // etc..

                            </tr>
                          </React.Fragment>
                        ))}
                      </tbody>
                    </table>
                  ) : (
                    <>
                      <div className="alert alert-danger" role="alert">
                        No hay datos
                      </div>
                    </>
                  )}
                </div>
              </div>
            </>
          )}


        </section>
      </div>
    </div>
  );
};
export default Proyeccion;

8
  • Hola. Para pintar en pantalla el "ReactFragment", debes establecerlo en un return, de tal froma {fechas.map((item, id) => {return ( <ReactFragment key={id}> {item.fecha} </ReactFragment> )})}. Espero que te funcione. Si tienes preguntas al respecto, no dudes en plantearlas. Commented el 15 nov. 2021 a las 21:08
  • @JoshuaRivera gracias por el aporte, pero tampoco me funciona Commented el 15 nov. 2021 a las 21:59
  • @g.4 gracias pero su comentario no tiene que ver con mi pregunta, creo Commented el 15 nov. 2021 a las 23:02
  • @g.4 es correcto necesito que 2021-10-25 sea el nombre de mi columna, eventualmente se añadirán mas fechas y quiero que esos valores de la fecha sean los nombres de las columnas Commented el 15 nov. 2021 a las 23:23
  • Bien, quita el null del operador ternario y pon un <p>test</p>, para confirmar que llegan datos en fechas.map, si despues de recargar sale test, entonces hay algún problema con fechas.map
    – g.4
    Commented el 15 nov. 2021 a las 23:25

1 respuesta 1

0

No parece haber problemas con la tabla JSX. Sin embargo, el problema parece estar en la forma en que se quiere usar la variable fechas.

Al declarar fechas de esta forma:

var fechas = [];

No se esta siguiendo el ciclo de vida del componente, pues como tal fechas no es una variable de estado en ReactJS, por lo tanto ReactJS no tiene control sobre su estado al intentar usarla dentro de JSX durante el ciclo de vida.

Se puede ver que el valor de fechas se ha modificado dentro del scope de la función getData; pero cuando useEffect devuelve el componente Proyección, fechas vuelve a tomar el valor de su declaración original en el componente:

var fechas = [];

Entonces, en esta pieza de código siempre se tendrá que fechas.length es igual a 0, mostrando null de acuerdo al operador ternario:

  <th>
    {fechas.length > 0 ?
      <>
        {fechas.map((item) => (
          <React.Fragment key={item.fecha}>
            {item.fecha}
          </React.Fragment>
        ))}
      </>
      :
      null
    }
  </th>

Workaround

Una forma de modificar el código para seguir el ciclo de vida del componente Proyección, es usar una variable de estado local para fechas:

const [fechas, setFechas] = useState([]);

Luego, en getData se aplica el set del estado fechas:

  const getData = () => {
    dispatch(getListProyeccionAction(cookies.get("IdUser")));
    //Obtengo un JSON y lleno un array llamado fechas con todos los valores fecha de mi json
    
    let auxFechas = [];
    for (const x of proyeccion) {
      auxFechas.push({
        fecha: x.fecha
      });
     }
    };
    //luego elimino las fechas duplicadas del mismo array
    var hash = {};
    auxFechas = auxFechas.filter(function (current) {
      var exists = !hash[current.id];
      hash[current.id] = true;
      return exists;
    });
    console.log(auxFechas.length);
    //set del estado fechas, react ya tiene control sobre el
    setFechas(auxFechas);
};

Redux Store es el dueño del estado

eventualmente se añadiran mas fechas.

Una mejora que se podría hacer, es mover el estado fechas a redux store, pues al usar el patrón redux, se supone que el store debe ser el dueño de las variables de estado de la app.

Esto implica, declarar su estado inicial en store, crear su dispatch/action y traerla al scope con useSelector.

De esta forma la app ya no tendrá que usar fechas como variable de estado local, si no como parte del store de redux.

Espero que esta respuesta sea de ayuda.

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.