Question

我在反应项目中使用highstocks时遇到以下错误。这里附上错误和代码。请帮忙摆脱这个错误。

错误对象无效作为React子对象（找到：具有键的对象（某些属性）。如果您要渲染子集合，请使用数组。在图表中

App.js

Charts.js

import React, { Component } from 'react';
import Charts from './Components/Charts.js';

class App extends Component {
  render() {
    return (
      <div>
         <Charts/>
      </div>
    );
  } 
}

export default App;

Answer 1

大概那样..理想情况下，数据应该带有道具

class Charts extends Component {


  constructor(props) {
    super(props);

    this.state = {
      data: [
        [Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
        [Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
        [Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
        [Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
      ]
    };
  }

  setRef = ref => {
    if (!this.ref) {
      this.ref = ref;
    }
  }

  componentDidMount() {


    HighCharts.stockChart(this.ref, {
      rangeSelector: {
        selected: 0
      },
      title: {
        text: 'USD to EUR exchange rate'
      },
      tooltip: {
        style: {
          width: '100%'
        },
        valueDecimals: 4,
        shared: true
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      series: [{
        name: 'USD to EUR',
        data: data,
        id: 'dataseries'
      }]
    })


  }

  render() {

    return (
      <div ref={this.setRef} />
    );


  }
}

export default Charts;

Highstocks组件反应错误

1 个答案: