ApexCharts在React里改了数据图表就是不更新怎么办？

技术康佳提问于 2026-01-31 10:36:29 阅读 68

组件

我在用ApexCharts做折线图的时候遇到个怪问题，当通过useState更新数据后图表没反应。之前试过forceUpdate和直接改series数组，但只有手动调整窗口大小才会重新渲染。


import React, { useState, useEffect } from 'react';
import ReactApexChart from 'react-apexcharts';

function Chart() {
  const [series, setSeries] = useState([{ name: 'Sales', data: [30, 40, 50] }]);

  useEffect(() => {
    setTimeout(() => {
      setSeries([{ name: 'Sales', data: [45, 60, 75] }]); // 更新数据后图表没变化
    }, 2000);
  }, []);

  return (
    
  );
}

控制台没报错但数据就是不更新，是不是需要额外设置更新方法？或者我的状态管理哪里有问题？

图表组件

我来解答赞 8 收藏

反馈

1 条解答

Mr-正浩 Lv1

你这个问题是典型的React组件更新机制导致的。ApexCharts本身不会监听React的状态变化，所以即使你更新了series，它也不会自动重新渲染。

解决方法是使用ReactApexChart的updateSeries方法手动触发更新。同时，为了安全起见，确保在异步操作中正确处理状态更新，避免潜在的竞态问题。

以下是修改后的代码：

import React, { useState, useEffect, useRef } from 'react';

import ReactApexChart from 'react-apexcharts';



function Chart() {

  const [series, setSeries] = useState([{ name: 'Sales', data: [30, 40, 50] }]);

  const chartRef = useRef(null);



  useEffect(() => {

    if (chartRef.current) {

      chartRef.current.updateSeries(series);

    }

  }, [series]);



  useEffect(() => {

    const timeout = setTimeout(() => {

      setSeries([{ name: 'Sales', data: [45, 60, 75] }]);

    }, 2000);



    return () => clearTimeout(timeout); // 注意清理定时器，防止内存泄漏

  }, []);



  return (

    <div>

      <ReactApexChart

        ref={chartRef}

        series={series}

        options={{ xaxis: { categories: ['Jan', 'Feb', 'Mar'] } }}

        type="line"

        height={350}

      />

    </div>

  );

}



export default Chart;

几点注意：
1. 使用useRef绑定图表实例，确保可以调用updateSeries。
2. 在第二个useEffect中清理定时器，防止组件卸载后仍然执行异步操作。
3. 不要直接依赖forceUpdate，这是不推荐的做法，容易引发不可预测的行为。

这样改完后，数据更新时图表应该就能正常刷新了。记得测试各种场景下的行为，确保没有意外的安全隐患。

2026-01-31 20:03