javascript - React JS - 无限循环问题

Question

我正在尝试向反应组件添加一些图表/条形图，但不断遇到无限循环问题。我试过这个我在网上找到的链接，但我无法让它与我的代码一起工作。 https://alexsidorenko.com/blog/react-infinite-loop/

此示例中的输入数据是静态的……我只想验证代码是否呈现……最终我将使用动态数据。

const MyComponent = ({ someInput }) => {
  const [state2, setState2] = useState([]);

  useEffect(() => {
    setState2({
      labels: ["January", "February", "March", "April", "May"],
      datasets: [
        {
          label: "Rainfall",
          backgroundColor: [
            "#B21F00",
            "#C9DE00",
            "#2FDE00",
            "#00A6B4",
            "#6800B4",
          ],
          hoverBackgroundColor: [
            "#501800",
            "#4B5000",
            "#175000",
            "#003350",
            "#35014F",
          ],
          data: [65, 59, 80, 81, 56],
        },
      ],
    });
  }, []);

  return (
    <div className="search">
      <Bar data={state2} />
    </div>
  );
};

export default MyComponent;

BAR COMPONENT（来自反应模板）。如果我使用 react-charts 中的标准 Bar 组件，它会呈现正常。只有当我使用这个 bar 组件时，我才会得到无限循环。但我认为问题在于我的代码而不是模板中的组件，因为它是在不同站点上使用的商业模板。

/* 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;

标签： javascriptreactjsreact-hooks