谷歌图表的“仪表板不是构造函数”错误

Question

我是一个天真的 React 开发人员，在使用 react 使用 Google 图表时遇到了一些困难。我在带有 ControlWrapper 的 ReactJs 组件中使用 Google Charts，如下所示。

componentDidMount: function(){
google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
componentDidUpdate: function(){
 google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
drawCharts: function(){
var cmpt = this;
//Removed detailed code from here due to copyright issues

//adding controls----------------
  
  let dashboard = new google.visualization.Dashboard( document.getElementById(cmpt.props.widgetId) );
  let controlId = '${this.props.widgetId}_control';
  var controlWrapper = new google.visualization.ControlWrapper({
    'controlType' : 'NumberRangeFilter',
    'containerId' : controlId,
    'options' : {
      'filterColumnLabel' : xDataSysName
    }
  });
  var barChart = new google.visualization.ChartWrapper({
    'chartType': 'BarChart',
    'containerId': this.props.widgetId,
    'options': options
  });

  dashboard.bind(controlWrapper, barChart);
  dashboard.draw(data);

  if(linkColumn){
    let selectionEventHandler = function() {
      window.location = data.getValue(barChart.getSelection()[0]['row'], 1 );
    };
      google.visualization.events.addListener(barChart, 'select', selectionEventHandler);
   }
  }
},

这不是整段代码，但应该足以解决我面临的问题。

第一次加载页面时，控制台中出现错误提示

google.visualization.Dashboard is not a constructor

我按 SHIFT+F5 重新加载页面，错误消失并且组件加载正常，除了依赖于 controlWrapper 的组件抛出错误如下

google.visualization.controlWrapper is not a constructor

即使在重新加载页面后也不会消失。我参考了this 讨论并尝试了他们的解决方案，但我仍然以上述方式收到这些错误。请帮我弄清楚如何解决它。另外，我无法理解为什么 dashboard 错误会在重新加载时消失。

Answer 1

在尝试使用任何构造函数之前，需要等到谷歌图表完全加载，
这是通过提供回调函数来完成的。

尝试如下更改加载语句...

componentDidMount: function(){
  google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},
componentDidUpdate: function(){
  google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},