(Проблема жизненного цикла?) React Chart js -2 не обновляет данные из componentDidMount - PullRequest
Новая
       100

(Проблема жизненного цикла?) React Chart js -2 не обновляет данные из componentDidMount

0 голосов
/ 21 марта 2020

Я пытаюсь заполнить данные диаграммы из моего бэкэнда.

Несмотря на то, что я извлекаю данные и отправляю данные в componentDidMount, столбцы или скаттеры не загружаются при загрузке страницы.

Если я измените ширину моего экрана в режиме проверки в google dev tools, он начинает загружаться, и это заставляет меня поверить, что это проблема жизненного цикла.

Однако изменение его на 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;

1 Ответ

1 голос
/ 21 марта 2020

вы должны обновить состояние после изменения 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]}});
}
...