グラフの取得が定義されていないReact + React-chartjsでのReferenceError

Question

ここでjavascriptとReactには新しくなったので、空のオブジェクトやそれに似たものを呼び出すのはエラーですか？誰かがこの問題を解決する正しい方向で私を指すことができれば。

ありがとうございました。

以下のコードは、ある

import React from 'react'; 

export default class ChartGraph extends React.Component { 

componentDidMount() { 
    let chartCanvas = this.refs.chart; 
    let data = this.props.data ? this.props.data : "not vailable data"; 

    let chartInstance = new Chart(chartCanvas, { // <= [BUG]: Offending line 
     type: 'line', 
     data: {data}, 
     options: { 
      title: { 
       display: true, 
       text: 'My awesome chart' 
      } 
     } 
    }); 

    this.setState({ chart: chartInstance }) 
} 

componentDidUpdate() { 
    let chart = this.state.chart; 
    let data = this.props.data; 

    data.datasets.forEach((dataset, i) => chart.data.datasets[i].data = dataset.data); 

    chart.data.labels = data.labels; 
    chart.udpate(); 
} 

render() { 

    let cssClassName = this.props.className; 

    const chartStyle = { 
     width: 600, 
     height: 250, 
     color: 'white' 
    }; 

    return (

     <canvas 
      ref={'chart'} 
      style={chartStyle}> 
     </canvas> 
    ); 
} 

}

ERROR：

chartgraph.jsx:68Uncaught ReferenceError: Chart is not definedcomponentDidMount @ chartgraph.jsx:68invokeComponentDidMountWithTimer @ ReactCompositeComponent.js:54notifyAll @ CallbackQueue.js:67close @ ReactReconcileTransaction.js:81closeAll @ Transaction.js:204perform @ Transaction.js:151batchedMountComponentIntoNode @ ReactMount.js:126perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:285_renderSubtreeIntoContainer @ ReactMount.js:371render @ ReactMount.js:392(anonymous function) @ index.js:11maybeReady @ startup_client.js:26loadingCompleted @ startup_client.js:38 
debug.js:41 Exception from Tracker recompute function: 
debug.js:41 TypeError: Cannot read property 'chart' of null 
    at ChartGraph.componentDidUpdate (chartgraph.jsx:83) 
    at ReactCompositeComponentWrapper.invokeComponentDidUpdateWithTimer (ReactCompositeComponent.js:65) 
    at CallbackQueue.notifyAll (CallbackQueue.js:67) 
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:81) 
    at ReactReconcileTransaction.closeAll (Transaction.js:204) 
    at ReactReconcileTransaction.perform (Transaction.js:151) 
    at ReactUpdatesFlushTransaction.perform (Transaction.js:138) 
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:90) 
    at Object.flushBatchedUpdates (ReactUpdates.js:173) 
    at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:204) 

Answer 1

問題はcomponentDidUpdate試みがthis.stateを参照するときに、そう、コンポーネントの初期状態を設定しないことであるかもしれませんそれはまだ存在しません。あなたの代わりにこれを使用する必要がありますクラスで

getInitialState() { 
    return { chart: null }; 
} 

：

constructor() { 
    this.state = { chart: null }; 
}