无法清除条形图的 React D3 组件错误：“无法读取未定义的属性 'map'”

Question

我在 bundle.js 文件中遇到重复出现的类型错误。

"Cannot read property 'map' of undefined" in bundle.js for BarChart 一个对象未​​定义并试图映射到一个数组，但我不确定这是从哪里来的，因为失败是在一个缩小的脚本中（在 bundle.js 中）。我没有尝试映射任何东西，并且数据参数已请求一个数组。此条形图代码直接来自 github 上的示例（见下文）。 是我做错了什么，还是这是个问题？

Repo With Example BarChart

我的代码：

React =  require('react');
var ReactDOM = require('react-dom');
var Display = require('./parts/display');
var d3 = require('d3');
var BarChart = require('react-d3-components').BarChart;
var scope;

class board extends React.Component
{
constructor()
{
    super()

    scope=this;


}
render()
{

        var data = [{
    label: 'Answer',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

    return(
            <div id='scoreboard'>

                <Display if={this.props.status === 'connected' && this.props.currentQuestion.q}>
                // <BarChart data={this.props.results} title={this.props.currentQuestion.q} height={window.innerHeight * 0.6} width={window.innerWidth * 0.9}/>
                 <BarChart
                         data={data}
                         width={400}
                        height={400}
                        title="Answer Results"
                        xScale={1}
                        yScale={1}
                        margin={{top: 10, bottom: 50, left: 50, right: 10}} />
                </Display>

                <Display if={this.props.status === 'connected' && !this.props.currentQuestion.q}>
                <h3>Awaiting a Question...</h3>
                </Display>


            </div>
        );
}
}

 module.exports = board;

Answer 1

运行代码会给我带来一些错误，所有这些都是因为xScale 和yScale 属性应该是函数（而不是数字）。如果你解决了这个问题（注意在原始示例中它们没有设置），它应该可以工作。

此外，您应该始终为您的 React 组件命名以大写字母开头。以小写开头的标签应该代表原始 HTML 元素（例如<div>、<textarea> 等），而不是您的自定义元素。