React图表组件TypeError排查及年份过滤实现指导

一、修复TypeError: Cannot read properties of undefined (reading 'year') #

错误核心原因 #

该错误是因为尝试访问未定义对象的year属性，常见触发场景：

• API请求未完成时组件提前渲染，此时数据为undefined或空数组
• 后端返回数据结构不符合预期（比如数组为空、嵌套层级错误）
• 数据处理时未做边界判断，直接访问嵌套属性

具体修复方案 #

1. 页面组件增加加载状态与数据校验

在请求数据过程中，先渲染加载提示，避免数据未就绪时渲染Chart组件：

// Home组件示例
import { useState, useEffect } from 'react';
import Chart from './Chart';

function Home() {
  const [userData, setUserData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/user-analytics')
      .then(res => res.json())
      .then(data => {
        setUserData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;
  if (!userData.length) return <div>暂无数据</div>;

  return <Chart data={userData} />;
}

export default Home;

2. Chart组件增加属性访问保护

使用可选链操作符?.或条件判断，避免访问未定义属性：

// Chart组件示例
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

function Chart({ data }) {
  // 处理单个数据对象的场景，提前做边界判断
  // const latestYear = data[0]?.year || '暂无数据';
  
  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="year" />
      <YAxis />
      <Bar dataKey="userCount" fill="#8884d8" />
    </BarChart>
  );
}

export default Chart;

3. 校验后端返回数据格式

确保后端返回符合预期的数组结构，示例如下：

[
  { "year": 2022, "userCount": 1200 },
  { "year": 2023, "userCount": 1800 },
  { "year": 2024, "userCount": 2500 }
]

若后端返回嵌套结构（如{ data: [...] }），需在前端取出对应层级数据后再传入Chart。

二、实现按年份过滤数据功能 #

方案1：前端本地过滤（适合小数据量场景） #

在Home组件中添加年份选择器，根据选中值过滤数据后传入Chart：

// Home组件升级版本
import { useState, useEffect } from 'react';
import Chart from './Chart';

function Home() {
  const [userData, setUserData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [selectedYear, setSelectedYear] = useState('all');
  const [loading, setLoading] = useState(true);

  // 提取所有年份选项
  const yearOptions = ['all', ...new Set(userData.map(item => item.year))];

  useEffect(() => {
    fetch('/api/user-analytics')
      .then(res => res.json())
      .then(data => {
        setUserData(data);
        setFilteredData(data);
        setLoading(false);
      });
  }, []);

  // 监听年份选择，实时过滤数据
  useEffect(() => {
    setFilteredData(
      selectedYear === 'all' 
        ? userData 
        : userData.filter(item => item.year === Number(selectedYear))
    );
  }, [selectedYear, userData]);

  if (loading) return <div>加载中...</div>;

  return (
    <div>
      <select value={selectedYear} onChange={(e) => setSelectedYear(e.target.value)}>
        {yearOptions.map(year => (
          <option key={year} value={year}>
            {year === 'all' ? '全部年份' : year}
          </option>
        ))}
      </select>
      <Chart data={filteredData} />
    </div>
  );
}

export default Home;

方案2：后端接口支持过滤（适合大数据量场景） #

修改后端接口，接收年份参数并返回对应数据：

后端接口示例（Node.js/Express）

// 后端路由代码
app.get('/api/user-analytics', (req, res) => {
  const { year } = req.query;
  let data = mockUserData; // 你的原始数据集

  if (year) {
    data = data.filter(item => item.year === Number(year));
  }

  res.json(data);
});

前端调用修改

在年份选择变化时，携带参数重新请求接口：

// Home组件中修改请求逻辑
useEffect(() => {
  setLoading(true);
  const url = selectedYear !== 'all' 
    ? `/api/user-analytics?year=${selectedYear}` 
    : '/api/user-analytics';
  
  fetch(url)
    .then(res => res.json())
    .then(data => {
      setFilteredData(data);
      setLoading(false);
    });
}, [selectedYear]);

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