我正在尝试从后端填充图表数据。

尽管我要在componentDidmount中获取数据并推送数据，但是页面加载时不会加载条形图或分散图。

如果我在Google开发工具中的“检查”模式下更改了屏幕宽度，它将开始加载，这使我认为这是一个生命周期问题。

但是，将其更改为componentWillMount并没有进行任何更改。如下所示，在渲染之前放置if语句将完全停止加载图表。

if(this.state.data.datasets[0].data.length ===0){
  return null;
}

有什么办法解决此问题？

import React,{ Component } from "react";
import axios from "axios";
import { Bar,Scatter } from "react-chartjs-2";

export class Data extends Component {
  constructor(props) {
    super(props);
    this.state = {
      provider: [],data: {
        labels: ["action","Anime","Children"],datasets: [
          {
            label: "Total",backgroundColor: "rgba(255,159,64,0.4)",borderColor: "white",borderWidth: 1,stack: 1,hoverBackgroundColor: "rgba(255,99,132,hoverBorderColor: "rgba(255,1)",data: []
          },{
            label: "Above ⭐️8.5",backgroundColor: "white",type: "scatter",showLine: false,data: []
          }
        ]
      }
    };
  }

  componentDidmount() {
    axios.get("http://localhost:8001/provider").then(res =>
      this.setState({ provider: res.data },() => {
        this.pushaction();
      })
    );
  }

  pushaction() {
    const dataState = this.state.data;
    const oldDataTotal = this.state.data.datasets[0].data;
    const oldDataGood = this.state.data.datasets[1].data;

    oldDataTotal.push(this.state.provider[0].huluaction);
    oldDataTotal.push(this.state.provider[0].huluAnime);
    oldDataTotal.push(this.state.provider[0].huluChildren);

    oldDataGood.push(this.state.provider[0].action);
    oldDataGood.push(this.state.provider[0].Anime);
    oldDataGood.push(this.state.provider[0].Children);
  }

  render() {
    console.log(this.state.musicalData);
    const options = {
      responsive: true,maintainAspectRatio: false,legend: {
        display: true
      },type: "bar",scales: {
        xAxes: [
          {
            stacked: true
          }
        ],yAxes: [
          {
            stacked: true
          }
        ]
      }
    };

    return (
      <div>
        <Bar data={this.state.data} height={300} options={options} />
      </div>
    );
  }
}

export default Data;