反应HighChart示例

Question

我正在使用React-js-highcharts，我已经完成了以下代码，获取数据e.render（）：必须返回一个有效的React元素（或null）。您可能已返回undefined，数组或其他一些无效对象。错误。

请帮助我解决这个问题。

遵循了这个例子。

https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/SimpleLine/App.js

import React from 'react';
import Highcharts from 'highcharts';
import {
    HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Subtitle, Legend, LineSeries
  } from 'react-jsx-highcharts';
import { extent as d3ArrayExtent } from 'd3-array';


const plotOptions = {
    series: {
      pointStart: 2010
    }
  };

class ProductHealth extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: [],
        }
    }

    componentDidMount()  {

        let defaultOptions = {
            method:'GET',
            headers:{
                Accept: 'application/json',
            }
        };

        fetch('http://localhost:3000/health', defaultOptions)
        .then(function(response) {
            // The response is a Response instance.
            // You parse the data into a useable format using `.json()`
            let resData = response.json();
            return resData;
          }).then(response => {
              console.log("Response",response);
              this.processResponseData(response);
        }).catch(function(error){ console.log(error) })
    }

    processResponseData = (response) => {
        let apiValues = [];
        response.forEach(element => {
            let value = [];
            element.values.forEach(item => {
                value.push(
                    [item.count]
                );
            })

            apiValues.push({
                name : element.api,
                value : value
            })
        });

        this.setState({
            data : apiValues
        });
    };



    renderLineChart() {
        return this.state.data.map((lineData, index) => {
            return (
                <LineSeries key={index} name={lineData.api} data={lineData.value} />
            )
        })  
    }

    render() {
        if (this.state.data.length > 0) {
        return (

            <div>
                <HighchartsChart plotOptions={plotOptions}>
                <Chart />

                <Title>Visa Direct Data</Title>
                <Legend layout="vertical" align="right" verticalAlign="middle" />
                <XAxis>
                    <XAxis.Title>Time</XAxis.Title>
                </XAxis>
                <YAxis>
                <YAxis.Title>API Calls</YAxis.Title>
                   {this.renderLineChart()}
                </YAxis>
                </HighchartsChart>
            </div>
        ); 
        } else {
            return <div>Loading...</div>;

        }
    }
}

export default withHighcharts(ProductHealth, Highcharts);

Answer 1

我强烈建议您尝试使用我们的官方React包装器，也可以通过npm下载。

这是包的链接：https://www.npmjs.com/package/highcharts-react-official

GitHub存储库：https://github.com/highcharts/highcharts-react

Answer 2

我知道我已经迟到了7个月，但看起来就像线索所在

You may have returned undefined, an array or some other invalid object

你将返回this.state.data.map，它将返回一个数组。

我建议你试试

renderLineChart () {
  const { data } = this.state
  return (
    <Fragment>
      {data.map((lineData, index) => (
        <LineSeries key={index} name={lineData.api} data={lineData.value} />
      )}
    </Fragment>
  )
}