차트 가져 오기가 정의되지 않았습니다. React + React-chartjs가있는 ReferenceError

JavaScript와 React가 새로 생겼기 때문에 빈 객체 또는 이와 유사한 것을 호출하는 것이 오류라고 생각합니까? 누군가가이 문제를 해결할 올바른 방향으로 나를 지적 할 수 있다면.차트 가져 오기가 정의되지 않았습니다. React + React-chartjs가있는 ReferenceError

감사합니다.

코드는 아래

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)

출처

2016-07-19 intercoder

문제는 componentDidUpdate 시도가 this.state을 참조 할 때 그래서, 구성 요소의 초기 상태를 설정 결코있을 수 있습니다 아직 존재하지 않습니다.

보십시오이 추가 : 클래스에서

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

을 대신 이것을 사용할 필요가 있습니다

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

출처

2016-07-19 15:26:46

이봐, 난 그냥 그것을 변경 다음 '''getInitialState() { \t \t let chart = this.props.state? this.props.state : null; \t \t 반환 { \t \t \t 차트 \t \t}; \t}''' 이제 다음 오류가 발생합니다.'''warning.js : 44Warning : getInitialState는 일반 자바 스크립트 클래스 인 ChartGraph에서 정의되었습니다. 이것은 React.createClass를 사용하여 생성 된 클래스에서만 지원됩니다. 상태 속성을 대신 정의 하시겠습니까? chartgraph.jsx : 77Uncaught ReferenceError : 차트가 정의되지 않았습니다.''' – intercoder

React.Component에서 생성 한 클래스에 적용 할 수 있다고 생각하는 답변을 대신 추가했습니다. –

차트 가져 오기가 정의되지 않았습니다. React + React-chartjs가있는 ReferenceError

답변

관련 문제