（生命周期问题？）React Chart js-2 没有从 componentDidMount 更新数据

Question

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

虽然我在 componentDidMount 中获取数据并推送数据，但在页面加载时并未加载 Bars 或 Scatter。

如果我在谷歌开发工具的检查模式下更改我的屏幕宽度，它会开始加载，这让我相信这是一个生命周期问题。

但是，将其更改为 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,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

你必须在更改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]}});
}