Reactjs React js未处理的拒绝（TypeError）：t[l]。data.map不是函数

我试图动态显示我的图形，但在标题中提到了这个错误：如何将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
        }]  
      }  
    }

---

您可以在

componentDidMount

中等待

axios

调用，然后使用数据在您的状态下设置

系列

：

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

---

你也应该考虑使用TIG/catch来处理错误。

< p>你可以<代码>等待<代码>你的代码> AXIOS < /CUD>调用<代码>组件Deals< /Cord>，然后使用数据在你的状态下设置<代码>系列< /代码>：

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

您还应该考虑使用TIG/catch捕获错误。