React.js与TypeScript中对象属性值map映射渲染失败问题

• 拼写错误：不存在Objects.keys这个全局方法，正确写法是Object.keys，多写的s会直接导致代码运行报错。
• JSX语法使用错误：JSX中标签内的可执行JavaScript逻辑必须用{}包裹，你写的cityObj[city].map(...)没有被花括号包裹，会被解析器当成普通文本处理，根本不会执行遍历逻辑，自然拿不到城市下的slug数据。
• 缺失必要的列表key属性：React遍历渲染列表时要求每个同级元素有唯一key值，缺失会抛出控制台警告，极端场景下会出现渲染错乱。
• 没有做层级样式处理：就算逻辑跑通，没有缩进的话也达不到你想要的父子级展示效果。

建议先定义TS类型替代any，获得完整的类型校验和提示，再编写正确的渲染逻辑：

// 定义TS数据类型
type CityInfo = {
  released_on: string;
  slug: string;
}
const cityObj: Record<string, CityInfo[]> = {
  "Harare": [
    {"released_on":"2007-11-08T00:00:00", "slug":"0985"},
    {"released_on":"2007-11-08T00:00:00", "slug":"2346"}
  ],
  "bulawayo": [
    {"released_on":"2007-11-08T00:00:00", "slug":"9383"}
  ]
}

// JSX渲染部分
{Object.keys(cityObj).map(cityName => (
  <div key={cityName}>
    {/* 渲染城市名 */}
    <div>{cityName}</div>
    {/* 子项遍历逻辑必须用{}包裹，添加唯一key和缩进样式 */}
    {cityObj[cityName].map(item => (
      <div key={item.slug} style={{ paddingLeft: '2em' }}>
        - {item.slug}
      </div>
    ))}
  </div>
))}

代码运行后会输出和你预期完全一致的结构：

Harare
  -0985
  -2346
bulawayo
  -9383

你也可以把内联style替换成自定义CSS类名的样式，实现效果完全一致。

内容的提问来源于stack exchange，提问作者Brian Highforce Thomas