导入react-chatjs-2组件导致应用程序崩溃

Question

我的react应用程序使用从react-chattjs-2导入的组件运行了一段时间，但最近它在没有对应用程序的该区域进行任何更改后开始崩溃。

我在控制台中多次收到以下错误，无效的钩子调用是浏览器中显示的警告：

index.js:1警告：无效的钩子调用。钩子只能在函数组件的主体内部调用。

未捕获类型错误：无法读取null的属性(读取"useRef"(

上述错误发生在<ForwardRef(图表组件(>组件：

我曾尝试在同一应用程序的一个完全不同的页面中插入从react-chattjs-2导入的组件，但它也会在那里崩溃。如果我注释掉组件，应用程序就会停止崩溃，页面就会加载。

我不知所措，有什么建议吗？？以下是该组件的代码。

import { Line } from 'react-chartjs-2';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js'
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
)

const CapacityChart = ({chartData, generateChartData}) => {
console.log(chartData, 'chart data in chart component')
const options = {
plugins : {
legend: {
display: false
}
}
};
return (
<>
<div 
className='capacity-chart-refresh-btn'
onClick={()=>generateChartData()}
>
<FontAwesomeIcon icon={faArrowsRotate} />
</div>
<Line 
options={options}
data={chartData}
height = {10}
/>
</>
)
}
export default CapacityChart

Answer 1

想清楚了，对于任何处于类似情况的人来说，答案是我有一个服务器和一个应用程序的前端，两者有不同的package.json文件和node_module文件夹。。我在服务器的模块中安装了react-chartjs-2和chart.js，而不是前端的模块，所以我认为它使用了他们网站上描述的react的另一个实例：

反应无效挂钩警告