(Lifecycle problem?) React Chart js-2 not updating data from componentDidMount

Question

I am trying to populate chart data from my backend.

Although I am fetching data and pushing data in componentDidMount, the Bars or Scatters are not loaded on page load.

If I change my screen width in inspect mode in google dev tools, it starts loading which leads me to believe this is a lifecyle problem.

However, changing it to componentWillMount did not change anything. Putting a if statement before render like below just stops loading the chart altogether.

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

Any way to fix this problem?

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,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: []
          },
          {
            label: "Above ⭐️8.5",
            backgroundColor: "white",
            type: "scatter",
            showLine: false,
            stack: 1,
            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;

Answer 1

you have to update the state after changing the datasets,

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);

  this.setState({data: {...dataState, datasets : [...oldDataTotal, oldDataGood]}});
}