0

我有以下 Google Chart 组件作为我的 React 应用程序中页面主要组件的子组件

class GraficoHorasDia extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inst: { id: id_inst },
      espacos: props.espacos,
      dataInicio: props.dataInicio,
      dataFim: props.dataFim
    };
  }

  componentDidMount() {
    this.obterGraficoHorasDia();
  }

  obterGraficoHorasDia() {
    const url = `${SERVIDOR}/reports/grafico_horas_dia_dinamico/${
      this.state.inst.id
    }/${JSON.stringify(this.state.espacos)}/${
      this.state.dataInicio.toString() + ":00.000Z"
    }/${this.state.dataFim.toString() + ":00.000Z"}`;
    console.log("URL", url);

    axios
      .get(url)
      .then((res) => {
        if (res.data.success) {
          const data = res.data.data;
          let horas = new Array(24).fill().map(() => [0, 0, 0, 0]);
          data.ocupacao_baixa.count.forEach((element) => {
            horas[element.date_part][1] = parseInt(element.count);
          });
          data.ocupacao_moderada.count.forEach((element) => {
            horas[element.date_part][2] = parseInt(element.count);
          });
          data.ocupacao_elevada.count.forEach((element) => {
            horas[element.date_part][3] = parseInt(element.count);
          });

          let dadosMostrar = [...horas];
          dadosMostrar.forEach((a, i, arr) => {
            let b = [...arr[i]];
            b.shift();
            arr[i] = [i.toString(), ...b];
          });
          this.setState({ dadosMostrar: dadosMostrar });
        } else {
        }
      })
      .catch((error) => {});
  }

  render() {
    return (
      <>
        <div style={{ display: "flex" }}>
          <Chart
            width={"100%"}
            height={320}
            chartType="ColumnChart"
            loader={<div>A obter dados</div>}
            data={[
              [
                "Hora",
                "Ocupação baixa",
                "Ocupação moderada",
                "Ocupação elevada"
              ]
            ].concat(this.state.dadosMostrar)}
            options={{
              chartArea: { width: "90%", height: "75%" }, // TODO: Mudar para algo mais exato
              hAxis: {
                minValue: 0,
                title: "Horas"
              },
              vAxis: {
                title: "Opiniões"
              },
              legend: "top",
              colors: ["#ffeb3b", "#ff9800", "#f44336"]
            }}
            legendToggle
          />
        </div>
      </>
    );
  }
}

它正确地加载和呈现来自 API 的数据，但它从不更新状态变化。我把它放在一个带有动态信息的页面上，比如开始日期和结束日期，它将数据发送到 API 以获得正确的响应，使图表动态化。问题是，即使我在这些更改时更新了状态，对组件内部 API 的调用也不会重复，并且图表不会更新，除非我单击更改为另一个图表组件，这会触发完全重新渲染。有人可以解释为什么会发生这种情况以及我能做些什么来解决它吗？如果可能，我希望在图表组件内部进行调用

这是它的 CodeSandbox：https ://codesandbox.io/s/blissful-saha-5ohr9?file=/src/views/estatistica.js:3397-3400

4

0 回答 0