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.