javascript - 错误 "google.charts.load() cannot be called more than once with version .45 or earlier"

Question

我将 Google Charts API 与 React 和 Redux 结合使用。获取“错误 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，因此它们也不会绘制在同一个地方。

Answer 1

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