LineGraph.js第61行Promise类型错误求助：无法读取undefined的'5/29/22'属性

错误情况 #

控制台触发三处相同错误，错误信息：

LineGraph.js:61 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '5/29/22')

问题根源 #

1. 遍历对象不匹配：buildChartData函数中固定遍历data.cases的日期，但后续读取的是data[casesType][date]。当casesType不是cases时，若data[casesType]的日期集合和data.cases不一致，会出现某个日期在data[casesType]中不存在的情况，导致读取undefined的属性。
2. 无默认值防护：LineGraph组件的casesType属性未设置默认值，若父组件未传入或传入无效值，data[casesType]会直接是undefined，访问其日期属性必然报错。
3. 初始state类型错误：初始data设为对象{}，但后续逻辑判断data?.length，数组长度判断不适用于对象，可能导致组件渲染逻辑异常。

修复方案 #

1. 修正日期遍历对象 #

修改buildChartData函数，遍历当前casesType对应的日期集合，而非固定的data.cases：

const buildChartData = (data, casesType) => {
  let chartData = [];
  let lastDataPoint;
  // 遍历当前类型的日期，避免日期不匹配
  for (let date in data[casesType]) {
    if (lastDataPoint) {
      let newDataPoint = {
        x: date,
        y: data[casesType][date] - lastDataPoint,
      };
      chartData.push(newDataPoint);
    }
    lastDataPoint = data[casesType][date];
  }
  return chartData;
};

2. 给casesType设置默认值 #

确保组件在未传入casesType时使用默认有效类型：

function LineGraph({ casesType = 'cases' }) {
  // 原有逻辑保持不变
}

3. 修正初始state类型 #

将初始data改为数组，符合后续数据类型预期：

const [data, setData] = useState([]);

4. 增加数据校验 #

在获取数据后校验casesType对应的数据集是否存在，提前拦截错误：

.then((data) => {
  // 校验目标数据类型是否存在
  if (!data[casesType]) {
    console.error(`数据集中不存在${casesType}类型的数据`);
    return;
  }
  let chartData = buildChartData(data, casesType);
  setData(chartData);
});

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