Tengo un montón de gráficos para mostrar y necesito cargar datos por separado para cada uno de ellos.
La estructura de datos que identifica cada gráfico es una matriz y se ve así (la submatriz puede albergar una o más gráficas. En el caso de varios elementos en la subarregla, la gráfica tendrá varios ejes):
"charts":[["chart1"], ["chart2", "chart4", ...], ...]No se sabe de antemano cuántos elementos habrá en la matriz y cuántos tendrán subelementos.
Mi acercamiento
Primero reviso los charts y muestro marcadores de posición (cargadores), luego, si el estado de los data está disponible, muestro el gráfico:
const[data, setData] = useState(null); return( charts.map(item => { (item in data && data[item] !== "") ? <Chart data={data[item]} /> : <Loader /> }) ) Para la obtención de datos de Axios , pensé en usar useEffect , que llenaría la variable de estado data , que luego volvería a representar el componente para mostrar los gráficos ya cargados.
Mi problema aquí es que no estoy seguro de cómo utilizar useEffect para hacer esto, ya que llamar a Axios en un bucle y configurar la variable de estado de data en un bucle no me parece correcto. Supongo que entonces crearía un bucle infinito.
La otra pregunta un poco más pequeña es cómo esperar la carga de datos de todos los subelementos para mostrar el gráfico de varios ejes, si corresponde.
Basado en los comentarios, aquí hay un ejemplo de cómo actualizar setData en un enlace useEffect con las respuestas de múltiples llamadas a API a diferentes puntos finales:
const [data, setData] = useState([]) useEffect(() => { const getData = async(url) => { const res = await axios.get(url) setData(prevState => [...prevState, res.data]) } getData(url1) getData(url2) getData(url3) }, [])