Getting a Chart ist nicht definiert ReferenceError mit in React + React-chartjs

Question

So neu zu Javascript hier und reagieren, denke ich, der Fehler kommt von mir, ein leeres Objekt oder etwas ähnliches zu nennen? Wenn mir jemand in die richtige Richtung zeigen könnte, dieses Problem zu lösen.

Danke.

-Code ist unter

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

Das Problem könnte sein, dass Sie nie den Anfangszustand der Komponente festgelegt, so dass, wenn componentDidUpdate versucht this.state zu referenzieren Es existiert noch nicht.

Versuchen Sie, diese Zugabe:

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

In einer Klasse, die Sie könnte dies benötigen stattdessen verwenden:

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