(生命周期问题？)响应图表js-2不更新来自componentDidMount的数据

Question

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

虽然我正在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,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]}});
}