React+TypeScript嵌套映射报错：bounds无map属性的解决方法

错误原因 #

你定义的ConversionData类型里，bounds是单个对象而非数组，但你却对它调用了数组专属的map方法，这就是TypeScript报错的核心原因。

解决方案 #

根据你要获取bounds -> departure -> name的需求，分两种场景处理：

场景1：API返回的bounds确实是单个对象

直接访问对象属性即可，不需要用map。修改渲染代码如下：

return (
  <div className="App">
    <h1>
      {result?.map((value) => {
        return (
          <div key={value.uuid}> {/* 必须加唯一key，符合React列表渲染规范 */}
            <div>{value.price.amount}</div>
            {/* 直接读取bounds的departure.name */}
            <div>{value.bounds.departure.name}</div>
          </div>
        );
      })}
    </h1>
  </div>
);

场景2：API返回的bounds是数组（类型定义写错了）

如果实际接口返回的bounds是数组，先修正ConversionData的类型定义，把bounds改为数组类型，之后就能正常用map遍历：

type ConversionData = {
  uuid: string;
  airlinesCode: string;
  price: {
    amount: number;
    currency: string;
  };
  // 将bounds修正为数组类型
  bounds: Array<{
    departure: {
      code: string;
      name: string;
      dateTime: string;
    };
    destination: {
      code: string;
      name: string;
      dateTime: string;
    };
    duration: string;
  }>;
};

// 渲染部分正常使用map，注意加key和返回元素
return (
  <div className="App">
    <h1>
      {result?.map((value) => {
        return (
          <div key={value.uuid}>
            <div>{value.price.amount}</div>
            {value.bounds.map((boundItem) => (
              <div key={`${value.uuid}-${boundItem.departure.code}`}>
                {boundItem.departure.name}
              </div>
            ))}
          </div>
        );
      })}
    </h1>
  </div>
);

额外提醒 #

• 列表渲染时务必给每个元素添加唯一key，避免React抛出警告。
• useEffect里调用setResult(data)后立刻console.log(result)看不到最新值，因为setState是异步操作，要查看最新值可以在组件顶层写console.log(result)，或者给useEffect添加result依赖。

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