React js 未处理的拒绝（类型错误）：t[l].data.map 不是函数

Question

我尝试动态显示我的图表，但我在标题中提到了这个错误如何将由 axios 编辑的值 return 分配给系列数据，requete axiose return 只是一个使用 spring 引导的 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
        }]  
      }  
    }

Answer 1

您可以 await 在 componentDidMount 调用您的 axios，然后使用数据设置您所在州的 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 来处理错误。

React js 未处理的拒绝（类型错误）：t[l].data.map 不是函数

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

charts

bar-chart

reactjs

chart.js

apexcharts