无法清除条形图的 React D3 组件错误："Cannot read property 'map' of undefined"

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> 等），而不是您的自定义元素。

无法清除条形图的 React D3 组件错误："Cannot read property 'map' of undefined"

Cannot Clear React D3 Component Error for BarChart: "Cannot read property 'map' of undefined"

javascript

reactjs

d3.js

nvd3.js

react-d3