使用反应渲染谷歌图表时未捕获的不变违规

Question

我创建了一个小的反应程序来显示散点谷歌图表。我总共有 3 个文件：- a) index.html b)main.js 渲染我的 scatterChart & c) ScatterChart.js 这是我的 main.js 渲染的反应组件 ScatterChart.js 看起来像：

export default class PieChart extends React.Component {
	
constructor(){
		super();
		var myOptions = {
        title: 'Age vs. Weight comparison',
        hAxis: {title: 'Age', minValue: 0, maxValue: 15},
        vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
        legend: 'none'
    };
 
    var myData = [
       	['Age', 'Weight'],
       	[ 8,      12],
       	[ 4,      5.5],
       	[ 11,     14],
       	[ 4,      5],
       	[ 3,      3.5],
       	[ 6.5,    7]
    ];
   
   	 this.state={
       	data : myData,
       	options : myOptions
      };
 
	}


render() {
	return(
	        <Chart chartType = "ScatterChart" data = {this.state.data} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />
	      
      );
 }}

这会返回以下错误： 未捕获的不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。检查ScatterChart的渲染方法。

Answer 1

您在渲染方法中使用了<Chart />-component，但至少您的示例没有显示您在任何地方定义它，例如通过importing 它。

import Chart from "./foochart.jsx";

Answer 2

我用过 react-google-charts npm 模块
请导入您需要的模块。

import {Chart} from 'react-google-charts';
export default class GoogleChart extends React.Component {
constructor() {
    super();


    var columns=   [{
                        'type' : 'date',
                        'label' : 'Month'
                    },
                    {
                        'type': 'number',
                        'label' : 'Count'
                    } 

                    ];
        var rows = [
                    [ new Date(2015, 0),  20    ],
                    [ new Date(2015, 4), 30     ],
                    [ new Date(2015, 6), 20    ],
                    [ new Date(2015,9),  28    ],
                    [  new Date(2015, 11), 58    ]
             ];

        this.state={

                'rows':rows,
                'columns':columns,
                'chartType': "LineChart",
                'div_id': "AirPassengers",
                options : {title: "XXX Perfomance Index"}
        }

}

render() {

    return (

            <Chart chartType={this.state.chartType} width={"700"} height={"500"} rows={this.state.rows} columns={this.state.columns} options = {this.state.options} graph_id={this.state.div_id}  />                                          
        );
}

}

使用data:{}属性的方法需要<Chart/>中的column:['xx']属性，因为有一个条件检查列的长度，它要求列的长度为1或多个。