错误“使用 .45 或更早版本不能多次调用 google.charts.load()”答案

【问题标题】：Error "google.charts.load() cannot be called more than once with version .45 or earlier"错误“使用 .45 或更早版本不能多次调用 google.charts.load()”
【发布时间】：2016-06-07 06:45:24
【问题描述】：

我正在使用带有 React 和 Redux 的 Google Charts API。获取“错误 google.charts.load() 不能在版本 45 或更早版本中多次调用”

我不确定如何解决此问题，因为每次由于用户与应用程序交互而导致数据更改时，我都需要重新渲染图表。我在 ComponentWillMount 中加载数据后绘制了三个图表

componentWillMount() {

        //Loads all sales belonging to a user

        this.props.fetchSales(this.props.activeUser._id).then(() => {

            // 3 below functions load total revenue for today, the week, and the month

            this.calculateTodaysRevenue();
            this.calculateWeekRevenue();
            this.calculateMonthRevenue();
        });

    }

如果我们看一下 calculateTodaysRevenue()，您会发现这是我在 this.setState({}) 结束后第一次调用 google.charts.load() 的地方：

calculateTodaysRevenue() {

        //all of today's date values pulled from state

        const { currentDay, currentMonth, currentYear } = this.state;

        let todaysTotalRevenue = 0;
        let dataRowsForTodaysRevenue = [];

        this.props.allSales.map((sale) => {

            //checks the date key of each sale to see if it matches today's date

            if (sale.date.day === currentDay && sale.date.month === currentMonth && sale.date.year === currentYear) {

                todaysTotalRevenue += sale.total; //Adds each sale's total revenue per interation

                let time = [];
                time.push(sale.date.hour, sale.date.minutes);
                dataRowsForTodaysRevenue.push([time, todaysTotalRevenue]);

            } else { return; }

        });

        //sets profits and data rows for the graph only for today's data in local state

        this.setState({
            todaysTotalRevenue,
            dataRowsForTodaysRevenue
        }, () => {

            //After revenue is calculated and data for today is set in local state, draw chart for today's revenue

            google.charts.load('current', {packages: ['corechart', 'line']});
            google.charts.setOnLoadCallback(this.drawTodaysChart.bind(this));

        });

    }

我不确定如何在不调用 google.charts.load 的情况下将数据加载到图表中。有没有其他人知道我如何解决这个问题？我是否将 google.charts.load() 和 google.charts.setOnLoadCallback() 放在错误的位置？我在 componentWillMount() 中有这些调用的原因是因为每次我输入此页面的路线时，数据通常会有所不同，并且需要重新计算销售额，因此图表的数据会有所不同。每个图表都有自己的容器 div，因此它们也不会被绘制在同一个地方。

【问题讨论】：

load 应该在 dom / 页面加载时调用一次。使用setOnLoadCallback 知道load 何时完成。之后不需要任何一条语句——所以等待这些语句完成，然后开始其他所有语句。在setState之后直接调用drawTodaysChart...
听起来不错，我会尝试并更新它。如果我想传递 setOnLoadCallback 多个不同的回调函数，这也可以接受吗？我想在这个组件中的 3 个单独的 div 中总共绘制 3 个图表。
不，传递setOnLoadCallback 一个调用其余函数的函数...
所以如果我不将 setOnLoadCallback 或 load 放入 componentWillMount，那么将它们放入 React 组件的最佳位置在哪里？在组件的构造函数中？
看看this example——你也可以考虑使用react-google-charts

标签： javascript reactjs charts google-visualization

【解决方案1】：

我将对 google.charts.load() 的调用移到 index.html 中，这样就不会在每次运行 componentWillMount() 时调用它。您可以看到每次在 componentWillMount() 中运行 calculateTodaysRevenue() 时都会调用 google.charts.load()。这就是导致问题标题中列出的错误的原因。

【讨论】：