0

bundle.js ファイルで型エラーが繰り返し発生します。

"Cannot read property 'map' of undefined" in bundle.js for BarChart オブジェクトは定義されておらず、配列にマップしようとしていますが、失敗は縮小されたスクリプト (bundle.js) にあるため、これがどこから来ているのかわかりません。私は何もマップしようとしていません。また、データ パラメータは配列を要求しています。この棒グラフのコードは、github の例から直接引用したものです (以下を参照)。 私は何か間違ったことをしていますか、それともこれは問題ですか?

Github react-d3-components の BarChart サンプル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;
4

1 に答える 1

0

コードを実行すると、いくつかのエラーがスローされます。すべての原因はxScale、yScaleプロパティが関数 (数値ではない) である必要があるためです。それを修正すると（元の例では設定されていないことに注意してください）、動作するはずです。

さらに、常に大文字で始まる React コンポーネント名を付ける必要があります。小文字で始まるタグは、独自の HTML 要素ではなく、元の HTML 要素 (例: 、 など) を表すと想定されて<div>い<textarea>ます。

于 2016-10-22T20:14:16.410 に答える