TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

Question

我正在尝试使用 chart.js 的反应包装器，但我遇到了问题。当我尝试添加图表时，出现错误（“ TypeError: 无法读取属性 'defaults' of undefined")

代码如下：

import React, { useState, useEffect } from 'react';
import api from '../../services/API';
import './Graph.css';
import { Line } from 'react-chartjs-2';

export default function Graph() {
    const [dataChart, setDataChart] = useState({ });

    useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;
        const getData = async() => {
            let confirmedCases = [];
            let dateOfCases = [];
            await api.get('btt-prices', {signal: signal})
            .then ( resp => {
                for (const dataObj of resp.data ) {
                    console.log( dataObj )
                    confirmedCases.push(dataObj.price);
                    let tempDate = new Date (dataObj.date);
                    dateOfCases.push(tempDate.getUTCDate());
                }
            });
            
            setDataChart({ 
                labels: dateOfCases, 
                datasets: [{ 
                  label: 'Confirmed cases', 
                  data: confirmedCases 
                }]
            });
    
            //console.log(dataChart)
        }

        getData();
        return () => {
            abortController.abort();
        }
    }, []);
    
    return(
        <div className='container'>
            <Line data={ dataChart }/>
        </div>   
    );
}

显示的错误如下：

TypeError: Cannot read property 'defaults' of undefined
(anonymous function)
C:/Users/e/Desktop/test/front/node_modules/react-chartjs-2/es/index.js:643
  640 | }(_react["default"].Component);
  641 | 
  642 | exports.Scatter = Scatter;
> 643 | var defaults = _chart["default"].defaults;
  644 | exports.defaults = defaults;

我试图搜索它，但我看不到任何解决方案...为了以防万一，我尝试再次安装 chartjs（除了 react-chartjs），但错误仍然存在。我该如何解决这个错误谢谢！

Answer 1

你是 chart.js 的哪个版本运行因为如果你重新安装它，你很可能是运行 lib 的第 3 版，目前仍然不兼容包装器，因此您必须安装 chart.js (2.9.4)

的最新版本 2

Answer 2

是的，谢谢现在这个解决方案也适用于我，

我使用的是 chart.js 版本 >3.x

然后我将版本降级到 2.9.4 然后它对我有用。

纱线命令
纱线添加反应-chartjs-2
纱线添加 chart.js@2.9.4

Answer 3

第一个

npm uninstall react-chartjs

然后

npm i react-chartjs-2@2.9.0

TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

javascript

reactjs

chart.js

react-chartjs