使用highchart时未被捕获的Typerrors

Question

我已经在这样的页面上成功显示了高位图表（一个）：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

const options = {
  /* HERE I DEFINE OPTIONS */
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          TEST RELOAD <code>src/App.js</code> and save to reload.
        </p>

        <HighchartsReact
          highcharts={Highcharts}
          constructorType={"stockChart"}
          options={options}
        />
      </div>
    );
  }
}

export default App;

但是当我也尝试获取json数据并将其放在componentDidMount（）中时，我收到了来自highchart的奇怪异常：

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

  componentDidMount() {
    fetch("http://localhost:8000/sensor/reading")
      .then(data => data.json())
      .then(data => {
        this.setState({ readings: data });
      });
  }

  render() {
    console.log(this.state.readings);
    return (
      <div className="App">
        SAME CODE AS PREVIOUSLY
        <HighchartsReact
          highcharts={Highcharts}
          constructorType={"stockChart"}
          options={options}
        />
      </div>
    );
  }
}

export default App;

这是一个错误吗？也许componentDidMount有点混乱？我应该在DOM.render中创建HighChart吗？