React+TS项目报Cannot read properties of undefined (reading 'rent')如何解决

错误原因 #

这个报错本质是你尝试访问 undefined 上的 rent 属性，对应代码中就是 order.total_lld[duration] 的值为 undefined，具体原因一般有三类：

• TypeScript 接口只做编译时的类型校验，不会生效在运行时。你定义了 ComputedTotalLLDOptions 为数字索引结构，但不代表运行时你传入的 duration 对应的索引真的存在，比如你只预先计算了12、24、36期的租赁配置，但当前实际拿到的duration是18，就会出现取值为空的情况。
• 订单数据是异步请求获取的，渲染组件时接口还未返回数据，total_lld 还处于未初始化的空对象/空值状态。
• 前端计算 total_lld 的逻辑存在漏洞，部分合法的duration值没有生成对应的配置项。

解决方案 #

1. 加运行时安全防护 #

直接修改取值逻辑，用可选链+空值合并运算符做兜底，避免报错：

// 修改前
amount={order.total_lld[duration].rent / 100}
// 修改后
amount={(order.total_lld?.[duration]?.rent ?? 0) / 100}

// 另一处同理
amount={
  ((order.total_lld?.[duration]?.contribution ?? 0) +
  (order.total_lld?.[duration]?.rent ?? 0)) /
  100
}

2. 校验duration合法性 #

提前梳理所有支持的租期配置，取值前先判断duration是否在合法范围内，不合法则走兜底逻辑：

const VALID_DURATIONS = [12, 24, 36] // 替换为你实际支持的租期
if (!VALID_DURATIONS.includes(duration)) {
  // 可以在这里给默认duration，或者提示用户选择合法租期
  console.warn(`不支持的租期: ${duration}`)
}

3. 补全异步加载逻辑 #

如果订单数据是接口拉取的，增加loading状态判断，数据未返回时渲染加载态，不执行取值逻辑。

4. 补全total_lld生成逻辑 #

检查total_lld的计算逻辑，确保所有合法的duration都能生成对应的配置项，不会出现遗漏。

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