當我使用 Bar 組件渲染螢屏時，它會在無限回圈中渲染，甚至在我嘗試傳遞資料之前。我已經匯入 react-chartjs-2 進行測驗，效果很好，即只加載一次。但另一個條形圖似乎呈現，然后繼續這樣做，直到我的瀏覽器崩潰。
我認為這可能與我的組件是 const 的事實有關。
//import Bar from 'react-chartjs-2'; // <-- Renders once
import Bar from './../charts/Bar.js'; // <-- Renders in a loop
const MyComponent = () => {
return (
<div className="search">
<Bar/>
</div>
);
}
export default MyComponent;
這是我正在使用的 Bar 組件。它來自一個名為 Gogo-React 的 Themeforest 模板。
/* eslint-disable prefer-rest-params */
import React, { useEffect, useRef, useState } from 'react';
import { Chart } from 'chart.js';
import { barChartOptions } from './config';
const Bar = ({ data, shadow = false }) => {
const chartContainer = useRef(null);
const [, setChartInstance] = useState(null);
useEffect(() => {
if (chartContainer && chartContainer.current) {
if (shadow) {
Chart.defaults.global.datasets.barWithShadow =
Chart.defaults.global.datasets.bar;
Chart.defaults.barWithShadow = Chart.defaults.bar;
Chart.controllers.barWithShadow = Chart.controllers.bar.extend({
draw(ease) {
Chart.controllers.bar.prototype.draw.call(this, ease);
const {
chart: { ctx },
} = this;
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,0.2)';
ctx.shadowBlur = 7;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 7;
ctx.responsive = true;
Chart.controllers.bar.prototype.draw.apply(this, arguments);
ctx.restore();
},
});
}
const context = chartContainer.current.getContext('2d');
const newChartInstance = new Chart(context, {
type: shadow ? 'barWithShadow' : 'bar',
options: barChartOptions,
data,
});
setChartInstance(newChartInstance);
}
}, [chartContainer, data, shadow]);
return <canvas ref={chartContainer} />;
};
export default Bar;
uj5u.com熱心網友回復：
useEffect 正在監聽 chartContainer。然后 useEffect 正在運行并更改 canvas 和 chartContainer 參考，然后觸發 useEffect。這將導致回圈。
uj5u.com熱心網友回復：
該useEffect()鉤陣營被稱為每依賴的狀態改變，你欄呼叫時useEffect()多次因為chartContianer狀態的鉤得到更新。
更好的方法是更新圖表中的資料而不是整個圖表本身。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334104.html
標籤：javascript 反应 反应钩子
上一篇：如何播放通過檔案輸入加載的音頻