在React + ReferenceError -chartjs中未定义图表的获取

import React, { Component } from 'react';
import Chart from 'chart.js';

class ChartComponent extends Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  componentDidMount() {
    this.initializeChart();
  }

  componentWillUnmount() {
    this.destroyChart();
  }

  initializeChart() {
    const chartCanvas = this.chartRef.current.getContext('2d');
    new Chart(chartCanvas, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }

  destroyChart() {
    // 销毁图表实例
    if (this.chartRef.current) {
      this.chartRef.current.destroy();
    }
  }

  render() {
    return <canvas ref={this.chartRef} />;
  }
}

export default ChartComponent;