React JS - 无限循环中的组件渲染

Question

当我使用 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;

Answer 1

useEffect 正在监听 chartContainer。 然后 useEffect 正在运行并更改 canvas 和 chartContainer 引用，然后触发 useEffect。 这将导致循环。

Answer 2

React 中的useEffect()钩子在每次依赖项的状态改变时被调用，因为 chartContianer 状态被更新，你会重复调用useEffect()钩子。

更好的方法是更新图表中的数据而不是整个图表本身。