React Chart.js V2状态变更时折线不渲染问题求助

使用React Chart.js V2时，状态变更后图表仅渲染左侧y轴标签，折线无法绘制。控制台输出的数据集和标签语法完全正确，将该输出作为初始值时图表能正常显示，但状态更新时就是无法渲染折线。代码如下：

import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const chartOptions = {
  responsive: true,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  plugins: {
    title: {
      display: true,
      text: 'Chart.js Line Chart - Multi Axis',
    },
  },
  scales: {
    x: {
      ticks: {
        maxTicksLimit: 6
      }
    }
  }
};

export default function Home({ ranking }) {
  // 修正原代码的语法错误
  const refreshChart = () => {
    ...
    console.log({
      datasets,
      labels: dateLabels
    })
    setChartData({
      datasets,
      labels: dateLabels
    })
  }

  useEffect(() => {
    if (!statisticsLoading)
      refreshChart()
  }, [statisticsTimeSpan, statisticsLoading])


  return (
    ...
    <Line
      className="mb-4"
      options={chartOptions}
      data={chartData}
      redraw
    />
  )
}

• 确保状态不可变更新：React Chart.js依赖数据引用变化触发重绘，禁止直接修改原datasets数组（如push、splice），必须创建新数组：

  // 正确写法：生成新数组
  const updatedDatasets = [...datasets, newDatasetItem];
  setChartData({ datasets: updatedDatasets, labels: dateLabels });
  

• 修正函数语法错误：原代码中const refreshChart() =>属于语法错误，需改为const refreshChart = () =>，否则函数无法执行。
• 移除redraw属性：react-chartjs-2 V2中，redraw属性易与数据更新逻辑冲突，建议移除该属性，仅通过不可变的数据更新触发重绘。
• 初始化空状态结构：若chartData初始值为undefined或null，首次更新可能出现渲染异常，建议初始化为：

  const [chartData, setChartData] = useState({ datasets: [], labels: [] });
  

• 匹配数据集与标签长度：确保每个dataset的data数组长度和labels数组长度完全一致，否则折线无法正确映射到x轴。

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