CanvasJS 图表在首页加载时未更新

问：

我正在开发一个 Web 应用程序，我想以折线图的形式呈现数据。为此，我使用了 CanvasJS 组件 CanvasJSChart。一切正常，除了当我尝试重新加载页面时没有加载图形。这是我重新加载页面时看到的。当我更新代码（插入新行并保存）时，我看到了这个。datetime 字段用于筛选哪些日期和时间应该可见，只要我编辑数据点时它们可见，它们就会起作用。我发现唯一可以解决这个问题的是更新代码或调整窗口大小。

这是我用来创建选项并返回图表组件的代码。

import React from 'react';
import CanvasJSReact from '@canvasjs/react-charts';

const options = {
    zoomEnabled: true,
    animationEnabled: true,
    animationDuration: 1200,
    title: {
        text: "Graph to see shit"
    },

    toolTip: {
        shared: true,
        contentFormatter: function(e){
            var content = " ";
            for (var i = 0; i < e.entries.length; i++) {
                content += e.entries[i].dataSeries.name 
                        + " " + "<strong>" 
                        + e.entries[i].dataPoint.y + "</strong>";
                content += "<br/>";
            }
            content += e.entries[0].dataPoint.x + "<br/>";
            return content
        }
    },

    data: [
    {
        type: "line",
        name: "Temperature",
        showInLegend: true,
        dataPoints: []
    },
    {
        type: "line",
        name: "Humidity",
        showInLegend: true,
        dataPoints: []
    }]
}

export function GraphFunc(props){

    options.data[0].dataPoints = props.data.tempPoints;
    options.data[1].dataPoints = props.data.humPoints;
    return(
    <div>
        < CanvasJSReact.CanvasJSChart options={options} />
    </div>
    )
}

这是调用 API、收集数据点、处理日期选取器和创建图表组件的代码。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { GraphFunc } from './GraphFunc.js'

function formatData(data, lower, upper){
  var tmp = {tempPoints: [], humPoints: []};

  data.forEach(element => {
    var date = new Date(element.date);
    
    if(lower != undefined && upper != undefined){
      var epochTime = date.getTime();
      
      if(upper < epochTime || epochTime < lower){
        return;
      }
    }

    tmp.tempPoints.push({y: Number(element.temp), x: date})
    tmp.humPoints.push({y: Number(element.hum), x: date})
  });
  console.log("Nu byter jag saker")
  return tmp;
}

export function Graph() {

  const [data, getData] = useState('')
  const [startDate, setStartValue] = useState(dayjs());
  const [endDate, setEndValue] = useState(dayjs());
  const [oldStart, setOldStart] = useState(dayjs());
  const [oldEnd, setOldEnd] = useState(dayjs());
  
  useEffect(() => {
    getAllData(undefined, undefined);
  }, []);

  const getAllData = (lower, upper) => {
    axios.get("/api/dhts/")
        .then((res) => {
          const d = formatData(res.data, lower, upper)
          getData(d);
        })
        .catch((err) => console.log(err));
  }

  function handleChanges(e){
    if(startDate.$d.getTime() == oldStart.$d.getTime() && endDate.$d.getTime() == oldEnd.$d.getTime()){
      return
    }
    
    setOldStart(startDate);
    setOldEnd(endDate);

    getAllData(startDate.$d.getTime(), endDate.$d.getTime());
  }


  return(
    <>
    <GraphFunc data={data} />

    <div style={{display: "flex", alignItems: "center", justifyContent: "center",}}>
        <strong style={{marginBottom: 7, marginTop: 7}}>Pick dates for displaying data</strong>
    </div>  

    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div style={{display: "flex", alignItems: "center", justifyContent: "center",}}>
          <DateTimePicker value={startDate} onChange={setStartValue} onClose={handleChanges} label="Start date" />
          <DateTimePicker value={endDate} onChange={setEndValue} onClose={handleChanges} label="End date" />
      </div>  
    </LocalizationProvider>  
    </>
  )
}

我发现这篇文章有类似的问题，但我们的程序看起来完全不同。我确实认为某些东西是异步的，这会导致它无法加载。但是，我不知道有什么可以解决它。有人对此坐拥快速解决方案吗？