React-chartjs-2图表组件在Hook状态变更时无法正常刷新的问题

问题描述 #

我有一个图表组件，从父组件接收address参数，通过useData Hook获取该address对应的chartData。当传入新的address时，图表数据确实发生了变化，但仅标签被渲染，想了解更优的实现方式。

现有代码 #

function Chart({ address }) {
  const { labels, Data: chartData } = useData(address);

  const data = (labels, chartData) => {
    return {
      labels: labels,
      datasets: [
        {
          label: "Line 1",
          data: chartData,
        },
      ],
    };
  };

  return <Bar id={address} data={data(labels, chartData)} redraw={true} />;
}

问题分析 #

• 每次组件渲染时，data函数都会重新创建，导致Bar组件接收的data对象引用每次都不同，可能引发图表库的更新逻辑异常，无法正确识别chartData的变化。
• redraw={true}的设置可能未生效，部分图表库（如react-chartjs-2）更依赖数据引用的变化来触发重绘，而非强制重绘属性。
• 若useData Hook内部未返回新的chartData引用（仅修改原数据内部值），React的依赖对比机制会认为数据未变化，导致图表未更新。

优化方案 #

1. 用useMemo缓存数据对象 #

通过useMemo缓存生成的data对象，仅在labels或chartData变化时重新生成，保证引用稳定，触发图表库正确更新：

import { useMemo } from 'react';

function Chart({ address }) {
  const { labels, Data: chartData } = useData(address);

  // 仅当依赖项变化时重新生成data对象
  const data = useMemo(() => ({
    labels: labels,
    datasets: [
      {
        label: "Line 1",
        data: chartData,
      },
    ],
  }), [labels, chartData]);

  return <Bar id={address} data={data} />;
}

2. 强制组件重新挂载（可选） #

若上述方案仍未解决问题，可通过key属性强制Bar组件在address变化时重新挂载，确保完全刷新图表：

return <Bar key={address} id={address} data={data} />;

3. 检查useData Hook的实现 #

确保useData在address变化时返回新的数组/对象引用，而非修改原数据：

function useData(address) {
  const [labels, setLabels] = useState([]);
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    // 模拟数据请求
    fetch(`/api/data?address=${address}`)
      .then(res => res.json())
      .then(({ labels: fetchedLabels, data: fetchedData }) => {
        // 返回新数组，保证引用更新
        setLabels([...fetchedLabels]);
        setChartData([...fetchedData]);
      });
  }, [address]);

  return { labels, Data: chartData };
}

内容的提问来源于stack exchange，提问作者billyjean