0

Hola soy nuevo en react y tengo este problema estoy llamando a una api para consumirla y al momento de querer pasar los datos al cuerpo del grafico en chart js me sucede ese error, este es mi código. ya tengo mucho tiempo tratando de resolver el error pero no doy con la solución porfa alguna sugerencia para poder resolverlo :(

import React, { Component } from 'react';
   import axios from 'axios';
    import {Pie} from 'react-chartjs-2';
    import {JPA_API_URL} from '../../../../../Constantes';
    //import EscenariosServicio from '../../../../api/EscenariosServicio';
    
    class EscenarioReporte  extends Component {
      constructor(){
        super();
        this.state = {
          chartData:{},
         // labels:[],
        }
      }
    
      componentDidMount() {
        this.getChartData();
      }
    
      getChartData() {
        axios.get(`${JPA_API_URL}/costos/escenario/lista`).then(res => {
            const coin = res.data;
            let nombre = [];
            let codigo = [];
            coin.forEach(element => {
              nombre.push(element.nombre);
              codigo.push(element.codigo);
    
              });
    
              this.setState({nombre: nombre, codigo: codigo});
              console.log(this.state.nombre);
              console.log(this.state.codigo);
    
           console.log(coin)
           
            this.setState({
              chartData: {
                labels:nombre,
                datasets: [
                  {
                   // label: "Population",
                    data: codigo,
                    backgroundColor: [
                      "rgba(255, 99, 132, 0.6)",
                      "rgba(54, 162, 235, 0.6)",
                      "rgba(255, 99, 132, 0.6)"
                    ],
                  }
                ]
              }
            });
          });
        }
    
      render(){
    
            return (
              <div className="App">
              {Object.keys(this.state.chartData).length &&
                <Pie chartData={this.state.chartData}/>
              }
              </div>
            );
    
        }     
    }
    export default EscenarioReporte;

esto tengo hasta ahora necesito una ayuda por favor he intentado de todo y no consigo algún resultado. introducir la descripción de la imagen aquí

1 respuesta 1

0

el problema está en que en la llamada a axios creas unas variables: let nombre = [];let codigo = []; a las cuales les asignas un valor de la repuesta de axios,problema, las declaras como let.

Let:La instrucción let declara una variable de alcance local con ámbito de bloque(block scope), la cual, opcionalmente, puede ser inicializada con algún valor.

Esto hace cuando hagas esto:

chartData: {
            labels:nombre,

Te vaya como undefined,mi recomendación es que uses var o lo más correcto desde mi punto de vista crear un estado donde asignes los valores:

        this.state = {
        chartData:{},
        nombre,
        codigo
    }
1
  • muchísimas gracias Ncgomez17 me sirvió mucho te lo agradezco al mill. Commented el 28 mar. 2022 a las 16: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.