React+TypeScript调用API列表不显示及接口定义优化问询

1. 列表渲染为空无报错问题 #

问题原因 #

你定义的InnerModel所有字段名和接口实际返回的字段名不匹配：接口返回的字段为ID Nation、Nation、ID Year、Year、Population、Slug Nation，并非你写的小驼峰格式。TypeScript的类型断言仅在编译阶段生效，运行时无法对字段名做转换，因此你取item.population时实际得到的是undefined，React渲染undefined时不会输出任何内容，因此列表看起来为空，也不会触发控制台报错。

解决方法 #

你可以选择以下任意一种方案修复：

1. 调整字段名和接口返回对齐，修改InnerModel定义和渲染逻辑：

interface InnerModel {
  "ID Nation": string;
  Nation: string;
  "ID Year": number;
  Year: string;
  Population: number;
  "Slug Nation": string;
}
// 渲染时对应修改为
<li key={idx}>{item.Population}</li>

2. 在数据请求后做字段映射，转换为你需要的小驼峰格式：

function getData(): Promise<InnerModel[]> {
  return fetch(url).then(res => res.json()).then(result => {
    return (result as OuterModel).data.map(raw => ({
      idNation: raw["ID Nation"],
      nation: raw.Nation,
      idYear: raw["ID Year"],
      year: raw.Year,
      population: raw.Population,
      slugNation: raw["Slug Nation"]
    }))
  })
}

2. TypeScript接口定义效率优化方案 #

• 你可以使用JSON转TS类型的工具：将接口返回的完整JSON结构粘贴到工具中即可一键生成对应的TS接口定义，主流代码编辑器也有对应插件可在编辑器内直接完成转换，无需手动逐字段编写。
• 如果后端提供Swagger/OpenAPI等标准格式的接口文档，可以使用自动化工具批量导出全项目的接口请求函数和对应的TS类型定义，无需逐个接口查看返回结构。
• 搭配zod等运行时校验库使用：先编写数据结构的校验规则，再通过库自带的能力从校验规则中推断出TS类型，既可以避免字段名拼写错误的问题，还能在接口返回数据不符合预期时提前抛出明确的错误，方便问题定位。

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