React编译报Cannot read properties of undefined (reading 'endOf')如何解决

报错指向getHourlyWeather方法中的moment().tz(timezone).endOf('day')调用，moment().tz(timezone)返回了undefined，说明传入的时区参数无效，导致后续读取endOf属性失败。该问题多由接口返回异常数据、依赖缓存损坏触发。

修复步骤 #

• 增加接口返回时区合法性校验
  你当前仅判断了!data就返回404，没有校验data中是否存在合法的timezone字段，需要在调用getHourlyWeather前增加校验逻辑：

const data = await res.json();

// 新增时区合法性校验
if (!data || !data.timezone || !moment.tz.zone(data.timezone)) {
  return {
    notFound: true,
  };
}

• 给链式调用增加安全防护
  修改getHourlyWeather方法，用可选链避免直接读取undefined的属性，异常时直接返回空数组避免页面崩溃：

const getHourlyWeather = (hourlyData, timezone) => {
  const zone = moment.tz.zone(timezone);
  if (!zone || !hourlyData) return [];
  const endOfDay = moment().tz(timezone)?.endOf("day")?.valueOf();
  if (!endOfDay) return [];
  const eodTimeStamp = Math.floor(endOfDay / 1000);
  return hourlyData.filter((data) => data.dt < eodTimeStamp);
};

• 排查依赖损坏问题
  如果上述修改后仍报错，执行以下命令清理缓存重装依赖即可：

# Windows系统可手动删除node_modules文件夹和对应的锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
npm install

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