React ApexCharts 按时间间隔更新图表

我正在构建一个 React 应用程序，它将显示一些需要通过 api 调用不断更新的图表（使用 ApexCharts）。它们将显示来自不同来源的传感器数据。

我根据需要设计和配置了图表，但是如果我通过更改状态数组来更新数据setInterval表达式，在几次迭代内图表开始表现奇怪，就像同时存在冲突的更新一样。

这是 CodeSandBox 中的 App.js 文件：

//App.js
export default function App() {
  const [data, updateData] = useState([1, 2, 3, 4, 5, 6]);

  useEffect(() => {
    setInterval(() => {
      const val = Math.floor(Math.random() * (100 - 30 + 1)) + 30;
      let array = [...data, val];
      array.shift();
      updateData(array);
    }, 2000);
  });
  return (
    <div className="App">
      <ChartViewer data={data} title="Product Trends by Month" />
    </div>
  );
}

这是ChartViewer成分：

import Chart from "react-apexcharts";

export default function ApexChart(props) {
  const series = [
    {
      name: "xx",
      data: props.data
    }
  ];
  const options = {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: true
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: 2,
      curve: "smooth"
    },
    colors: ["#210124"],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        inverseColors: true,
        gradientToColors: ["#DB162F"],
        opacityFrom: 1,
        opacityTo: 1,
        type: "vertical",
        stops: [0, 30]
      }
    }
  }
  return (
    <div id="chart">
      <Chart options={options} series={series} type="line" height={350} />
    </div>
  );
}

另外，这里是 CodeSandbox 链接，您可以在其中查看行为：https://codesandbox.io/s/purple-monad-5c1i3?file=/src/ChartViewer.js:41-839 https://codesandbox.io/s/purple-monad-5c1i3?file=/src/ChartViewer.js:41-839

提前致谢

您没有向 useEffect 传递任何依赖项。这使得它在每个渲染上运行，从而使您的图表经常重绘。

要解决这个问题，你必须稍微改变一下 useEffect ：

  useEffect(() => {
    const interval = setInterval(() => {
      const val = Math.floor(Math.random() * (100 - 30 + 1)) + 30;
      let array = [...data, val];
      array.shift();
      updateData(array);
    }, 2000);
    return () => {
      window.clearInterval(interval); // clear the interval in the cleanup function
    };
  }, [data]); // pass the data as a dependency (because you are using it inside the effect)

您可以在此处查看更新后的行为：https://codesandbox.io/s/pedantic-mendeleev-tx5ck https://codesandbox.io/s/pedantic-mendeleev-tx5ck