Пример React HighChart

Question

Я использую React-js-highcharts, и я сделал приведенный ниже код, получая данные e.render (): должен быть возвращен действительный элемент React (или ноль). Возможно, вы вернули 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

Я знаю, что опоздала на 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>
  )
}

Answer 2

Я настоятельно рекомендую вам использовать нашу официальную оболочку React, которую также можно загрузить через npm.

Вот ссылка на пакет: https://www.npmjs.com/package/highcharts-react-official

GitHub репозиторий: https://github.com/highcharts/highcharts-react