React-TypeScript中react-chartjs-2传参后出现labels读取错误

问题场景 #

• 在React-TypeScript项目中使用react-chartjs-2和chart.js实现折线图
• 已完成配置：类型声明文件、接收options和data的LineGraph子组件、负责传参的SolvedGraph父组件
• 运行时触发错误：Cannot read properties of undefined (reading 'labels')
• 但如果直接在LineGraph组件内部声明options和data，图表能正常渲染

问题根因 #

组件初始化顺序出错，父组件在数据集还未完成初始化时就传递给了子组件，导致LineGraph接收到的data为undefined。当组件尝试读取data.labels时，自然触发了属性读取错误。

解决方案 #

1. 子组件添加空值校验 #

在LineGraph中先判断data及data.labels是否存在，再渲染图表，避免读取未定义的属性：

import { Line } from 'react-chartjs-2';
import { ChartData, ChartOptions } from 'chart.js';

type LineGraphProps = {
  data: ChartData<'line'>;
  options: ChartOptions<'line'>;
};

const LineGraph = ({ data, options }: LineGraphProps) => {
  // 空值校验，返回加载占位符
  if (!data || !data.labels?.length) {
    return <div>图表加载中...</div>;
  }

  return <Line data={data} options={options} />;
};

export default LineGraph;

2. 父组件确保数据就绪后再渲染子组件 #

在SolvedGraph中，等待数据初始化（比如异步接口请求、状态赋值）完成后，再渲染LineGraph：

import LineGraph from './LineGraph';
import { useState, useEffect } from 'react';
import { ChartData, ChartOptions } from 'chart.js';

const SolvedGraph = () => {
  const [chartData, setChartData] = useState<ChartData<'line'> | null>(null);
  const [chartOptions] = useState<ChartOptions<'line'>>({
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  });

  useEffect(() => {
    // 模拟异步数据获取或初始化逻辑
    const initChartData = async () => {
      // 替换为实际的数据获取逻辑
      const fetchedData = {
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [{
          label: '每日解决问题数',
          data: [8, 12, 5, 15, 10],
          borderColor: '#2196F3',
          backgroundColor: 'rgba(33, 150, 243, 0.1)',
          tension: 0.2
        }]
      };
      setChartData(fetchedData);
    };

    initChartData();
  }, []);

  // 仅当chartData存在时渲染子组件
  return chartData ? (
    <LineGraph data={chartData} options={chartOptions} />
  ) : (
    <div>加载中...</div>
  );
};

export default SolvedGraph;

3. 给props设置默认值 #

在子组件中为data和options设置默认空值，避免传入undefined导致报错：

const LineGraph = ({ 
  data = { labels: [], datasets: [] }, 
  options = { responsive: true } 
}: LineGraphProps) => {
  return <Line data={data} options={options} />;
};

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