Chartjs-React js Unhandled Rejection (TypeError): t[l].data.map is not a function

by

0👍

✅

You can await your axios calls in componentDidMount and then use the data to set the series in your state:

async componentDidMount() {
  const response1 = await axios.get("http://localhost:8080/designe/grapheone")
  const response2 = await axios.get("http://localhost:8080/designe/grapheoneone")

  const brand = response1.data
  const brandd = response2.data
      
  this.setState({
    series: [{
      name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
      type: 'column',
      data: brand
    }, {
      name: ' WON  count RFP ID / SAM ID',
      type: 'line',
      data: brandd
    }]  
  })  
}

For better performance, you can use axios.all to send both axios requests in parallel:

async componentDidMount() {
  const responses = await axios.all([
    axios.get("http://localhost:8080/designe/grapheone"),
    axios.get("http://localhost:8080/designe/grapheoneone")
  ])

  const brand = responses[0].data
  const brandd = responses[1].data
      
  this.setState({
    series: [{
      name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
      type: 'column',
      data: brand
    }, {
      name: ' WON  count RFP ID / SAM ID',
      type: 'line',
      data: brandd
    }]  
  })  
}

You should also consider handling errors using try/catch.

Leave a comment