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

【问题标题】：React js Unhandled Rejection (TypeError): t[l].data.map is not a functionReact js Unhandled Rejection (TypeError): t[l].data.map is not a function
【发布时间】：2020-07-21 13:41:45
【问题描述】：

我尝试动态显示我的图表，但我在标题中提到了这个错误，如何将 axios 返回的值分配给系列数据，requete axiose 使用 spring boot 仅返回一个 JSON 格式的值请帮我解决这个错误并动态显示石墨线、列这是我的代码

class ApexChart extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
      
        series: [{
          name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
          type: 'column',
          data: 1
        }, {
          name: ' WON  count RFP ID / SAM ID',
          type: 'line',
          data: 2
        }],
        options: {
          chart: {
            height: 350,
            type: 'line',
          },
          stroke: {
            width: [0, 4]
          },
          title: {
            text: 'Traffic Sources'
          },
          dataLabels: {
            enabled: true,
            enabledOnSeries: [1]
          },
          labels: [''],
          xaxis: {
            type: 'text'
          },
          yaxis: [{
            title: {
              text: ' ATOS PFE EL MANDOUR AMINE',
            },
          
          }, {
            opposite: true,
            title: {
              text: 'Social Media'
            }
          }]
        },
      
      
      };
    }
    async componentDidMount(){
      this.state = {brand: []};
      axios.get("http://localhost:8080/designe/grapheone")
      .then(response => response.data)
      .then((data) =>{
        this.setState({brand : data})
      
      })
      
    
    }
    async componentDidMount(){
      this.state = {brandd: []};
      axios.get("http://localhost:8080/designe/grapheoneone")
      .then(response => response.data)
      .then((data) =>{
        this.setState({brandd : data})
      
      }
      
    
    
      )
    
      
      
      this.setState = {
      
        series: [{
          name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
          type: 'column',
          data: this.state.brand
        }, {
          name: ' WON  count RFP ID / SAM ID',
          type: 'line',
          data: this.state.brandd
        }]  
      }  
    }

【问题讨论】：

标签： reactjs charts chart.js bar-chart apexcharts

【解决方案1】：

你可以await你的axios调用componentDidMount然后使用数据设置series在你的状态：

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
    }]  
  })  
}

为了获得更好的性能，您可以使用axios.all 并行发送两个axios 请求：

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
    }]  
  })  
}

您还应该考虑使用 try/catch 处理错误。

【讨论】：