React TypeScript中如何遍历数组？修复contract.reason.map的undefined报错

报错根因 #

这个是TypeScript静态类型检查抛出的错误，说明你定义的ContractUsage类型中，reason字段被标记为了可选属性（也就是定义时加了?修饰符），TS判定它存在为undefined的可能性，所以不允许你直接调用map方法。你运行时打印出数组只是实际运行的情况，不影响TS的静态检查逻辑。
另外你现有代码里aria-label={contract.reason}直接绑定数组也不符合规范，读屏器无法正常识别数组内容，建议转成拼接后的字符串。

修复方案 #

下面给三个可选用的修复方式：

• 方式1：加可选链+空值兜底（最稳妥，推荐）
  调用map前用可选链?.判断reason是否存在，同时用空值合并运算符??给undefined场景兜底空数组，代码修改后如下：

  <p aria-label={contract.reason?.join('，') ?? ''}>{
    contract.reason?.map((reason: string, i: number) => (
      <text key={i}>{reason}</text>
    )) ?? []
  }</p>
  

  额外提醒：React遍历列表元素需要加唯一key属性，不然会触发控制台告警，这里暂时用索引i做key，如果你业务里有唯一的reason标识可以替换成对应字段。
• 方式2：加非空断言（适合你100%确定reason一定存在的场景）
  如果你能保证所有contract实例的reason字段一定是数组，直接在reason后面加非空断言!即可，告诉TS你确认这个字段不会是undefined：

  contract.reason!.map(...)
  

• 方式3：修改类型定义（从根源解决问题）
  找到你定义ContractUsage接口/类型的代码，把reason字段的可选修饰符去掉：

  // 修改前
  interface ContractUsage {
    // 其他字段...
    reason?: string[]
  }
  // 修改后
  interface ContractUsage {
    // 其他字段...
    reason: string[]
  }
  

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