BarChartの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>など）を表していますが、カスタムHTML要素は表示されません。