Получение диаграммы не определено ReferenceError с помощью React + React-chartjs

Я думаю, что ошибка исходит от того, что я вызываю пустой объект или что-то подобное?

Код ниже

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>
    );
}

}

ОШИБКА:

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)

reactjs react-chartjs chart.js
person intercoder    schedule 19.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема может заключаться в том, что вы никогда не устанавливаете начальное состояние компонента, поэтому, когда componentDidUpdate пытается сослаться на this.state, он еще не существует.

Попробуйте добавить это:

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

В классе вам может понадобиться использовать это вместо этого:

constructor() {
    this.state = { chart: null };
}
person Radio-    schedule 19.07.2016
comment
Эй, я только что изменил его на следующее: getInitialState() { let chart = this.props.state ? this.props.state : null; return { chart }; } Но теперь получаю следующую ошибку: warning.js:44Warning: getInitialState was defined on ChartGraph, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead? chartgraph.jsx:77Uncaught ReferenceError: Chart is not defined - person intercoder; 20.07.2016
comment
Я добавил альтернативу своему ответу, который, как мне кажется, применим к классам, созданным из React.Component. - person Radio-; 20.07.2016