如何在Highcharts React上获取数据

Question

我想在Highcharts React中将数据从API提取到Highstock图表中。 该API会自动生成随机数，并且还会生成一个空值。

在github上的官方文档中，使用静态数据link

代码：

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'

const options = {
  title: {
    text: 'My stock chart'
  },
  series: [{
    data: [1, 2, 3]
  }]
}

const App = () => <div>
  <HighchartsReact
    highcharts={Highcharts}
    constructorType={'stockChart'}
    options={options}
  />
</div>

render(<App />, document.getElementById('root'))

我尝试获取以getData函数开头的数据，并将其放置在componentDidMount上：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import moment from 'moment-timezone';

const getConfig = data => ({
    chart: {
        type: 'area'
    },
    rangeSelector: {
        allButtonsEnabled: false,
        buttons: [{
            type: 'minute',
            count: 5,
            text: '5m'
        }, {
            type: 'minute',
            count: 30,
            text: '30m'
        }, {
            type: 'hour',
            count: 1,
            text: '1h'
        }, {
            type: 'hour',
            count: 3,
            text: '3h'
        }, {
            type: 'hour',
            count: 6,
            text: '6h'
        }, {
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'week',
            count: 1,
            text: '1w'
        }, {
            type: 'all',
            text: 'All'
        }],     
        selected: 1
    },
    title: {
        text: 'Highcharts',
    },
    yAxis: {
        allowDecimals: false,
        labels: {
            format: '{value}'
        }
    },
    tooltip: {
        formatter: function () {
            return 'Value: <b>' + this.y + '</b>';
        }
    },
    series: [
        {
            name: 'Data',
            data: data,
        },
    ],
});

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataResults: [],
        };
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        fetch('https://myapi.net/api/data')
            .then(res => res.json())
            .then(data => {
                this.setState({
                    dataResults: data,
                });
            });
    };

    render() {
        const { dataResults } = this.state;
        const chartConfig = getConfig(dataResults);
        return <HighchartsReact
            highcharts={Highcharts}
            constructorType={'stockChart'}
            options={chartConfig}
        />
    }
}

export default App;

render(<App />, document.getElementById('root'));

但是有一个错误TypeError: Cannot read property 'hoverSeries' of undefined。

有人可以帮助我解决这个问题吗？