使用 react-chartjs-2 时“无法读取未定义的属性“默认值”错误

如何解决使用 react-chartjs-2 时“无法读取未定义的属性“默认值”错误

在 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,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"

解决方法

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

如果您将 "chart.js": "^3.1.0", 更改为 "chart.js": "^2.9.4", 并再次运行您的安装命令，它将起作用