React ApexCharts 更新图表与间隔答案

【问题标题】：React ApexCharts update chart with intervalReact ApexCharts 更新图表与间隔
【发布时间】：2020-05-05 04:55:49
【问题描述】：

我正在构建一个反应应用程序，它将显示一些需要通过 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

提前致谢

【问题讨论】：

标签： reactjs apexcharts

【解决方案1】：

您没有将任何依赖项传递给 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

【讨论】：

【解决方案2】：

您忘记将空数组作为 useEffect 挂钩的第二个参数：

它现在正在工作。试试这个代码：

import React, { useState, useEffect } from "react";
import "./styles.css";
import ChartViewer from "./ChartViewer";

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];
      console.log(array);
      array.shift();
      updateData(array);
    }, 2000);
  }, []);
  return (
    <div className="App">
      <ChartViewer data={data} title="Product Trends by Month" />
    </div>
  );
}

这里是工作沙盒：https://codesandbox.io/s/peaceful-fire-fdw98

卸载此组件时不要忘记清理 setInterval API 调用。

谢谢

【讨论】：