0

Muy buenas, estoy desarrollando unas gráficas en la cual manejo 2 componentes en jerarquía. Uno se llama <GraficosIn/> otro <Grafico/> donde renderiza la data. Muestro el padre:

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import config from '../resources/config/config'


import Grafico from '../components/graficos/Grafico'

const GraficosIn = ({ }) => {

  const [sqlMes, setSqlMes] = useState("SELECT ventas.name, ventas.value FROM ventas WHERE camp = 'in'")

  const [dataGeneralMes, setDataGeneralMes] = useState([]);

  useEffect(() => {
    dataGeneralMes.length == 0 && dataGeneralMes.length == 0 ? loadDataMes() : ''
    setInterval(loadData, 30000);
  }, [])

  // ------------------------------- Mes ------------------------------------
  const loadDataMes = async () => {
    var res = await axios.get(`${config.urlServer}/server/getData/${sqlMes}`)
    setDataGeneralMes(res.data)
  }

  return (
    <div className="container-fluid">
        <Grafico
          data={dataGeneralMes}
        />
    </div>
  );
}

export default GraficosIn;

Lo tengo programado para que cada 30 segundos se me actualice el grafico. El componente del gráfico recibe la data y muestra valores, sin mas procesos. Lo cierto es que me actualiza la dataGeneralMes como lo espero pero el componente de Gráfico como ya cargó inicialmente, no actualiza; es más se queda con la data inicial que está en blanco, omitiendo las consultas realizadas en el useEffect. Una solución que encontré fue eperar a que tuviera datos.

<div className="container-fluid" >
  {dataGeneralMes.length > 0
    ? <Grafico
        dataGeneralMes={ dataGeneralMes }
      /> 
      : null 
  }
</div>

Claro me carga la data inicial pero no se actualiza como lo espero. Un saludo. Agrego componente <Grafico/>: Ahora corregido.

import React, { PureComponent } from 'react';
import { ResponsiveContainer, PieChart, Pie, Legend, Cell, Tooltip } from 'recharts';

const COLORS = ["#17A606", "#A60606", "#a2a2a2", "#FFE20C"];

const Grafico = ({ data }) => {
  
  useEffect(() => {
  }, [data])

  return (
    <div style={{ width: '100%', height: 300 }}>
      <ResponsiveContainer>
        <PieChart>
          <Legend />
          <Tooltip />
          <Pie dataKey="value"
            data={data}
            fill="#8884d8"
            label >

            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

export default Grafico;

Eso es todo, con eso se resuelve el problema, re-enderizando el componente hijo cada vez que los datos en el componente padre cambien. Un saludo.

1 respuesta 1

1

Deberías intentar pasarle un segundo argumento con el estado dataGeneralMes a la función useEffect() para decirle a React que debe re-redenrizar el componente por cada vez que escuche cambios en ese estado.

Eso es lo que recomienda la documentación oficial de React.

Así que haciendo eso el useEffect() te quedaría así:

useEffect(async () => {
    loadDataMes();
    setInterval(loadDataMes, 30000);
  }, [dataGeneralMes])
9
  • Bien, pero en el server se queda consultando continuamente
    – Weizman
    Commented el 29 dic. 2021 a las 21:23
  • Además con el setInterval ya le defino que consulte cada 30 segundos, lo que no me actualiza es la data que paso al grafico, para que vuelva a mostrar los datos actuales
    – Weizman
    Commented el 29 dic. 2021 a las 21:29
  • Y si establezco una variable par que cada vez que cambie el estado desmonto y vuelvo a mostrar el Componente <Grafico/>. Para que se actualice en el setInterval
    – Weizman
    Commented el 29 dic. 2021 a las 21:31
  • No termino de entender cuál es el problema de mi respuesta. Lo que te propongo es que se re-renderice el componente por cada vez que se mute el estado dataGeneralMes. Hacer eso, como consecuencia, hará que la prop data que le pasas al componente <Grafico /> sea actualizada y le pase los datos correctos. De todas formas y para tener más información de tu problema, sería bueno que nos muestres el contenido de tu componente <Grafico /> para tener un panorama más completo. Commented el 30 dic. 2021 a las 0:33
  • Bueno, tuve que incorporar una validación en el useEffect. La dejo abajo del todo
    – Weizman
    Commented el 30 dic. 2021 a las 14: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.