"Cannot read propery "使用 react-chartjs-2 时出现默认“未定义”错误

Question

在 React 中设置图表组件后出现错误。

错误：

代码：

import React, {useEffect, useState} from 'react';

import {Line} from 'react-chartjs-2';

import './EloChart.css';


const EloChart = props => {

  const [chartData,setChartData] = useState({})

  const chart = () => {
    setChartData({
      labels: ['december','january','february','march','april'],
      datasets: [
        {
          label: 'elorating',
          data: [1500, 1600, 1700, 1800, 1900],
          backgroundColor: [
            'rgba(75, 192, 192, 0.6)'
          ]
        }
      ]
    })
  }

  
  useEffect(()=> {
    chart()
  }, [])

  return (
    <section className="elo-chart" >
      <h2>Elo Chart</h2>
        <Line data={chartData}/>
    </section>
  );
};

export default EloChart;

Package.json:

  "dependencies": {
    "chart.js": "^3.1.0",
    "react": "^16.8.6",
    "react-chartjs-2": "^2.11.1",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"

Answer 1

React 包装器尚未更新以支持 chartjs 版本 3，因此您必须降级到版本 2.9.4。

如果您将 "chart.js": "^3.1.0", 更改为 "chart.js": "^2.9.4", 并且运行您的安装命令再次生效

"Cannot read propery "使用 react-chartjs-2 时出现默认“未定义”错误

"Cannot read propery "defaults" of undefined" error while using react-chartjs-2

reactjs

npm

chart.js

react-chartjs