React.js遍历对象渲染表格出现TS类型报错的解决方法

你的代码有两个核心问题导致渲染失败和TS报错：

• 渲染逻辑无返回值：map回调里用大括号{}包裹了JSX内容，但没有写return语句，遍历后所有项返回undefined，React无法渲染任何内容。同时表格结构错误：你把所有遍历生成的<td>都塞进了同一个<tr>里，正常表格应该是每一组城市数据单独占一行。
• TS类型推断失败：你没有给cities对象声明明确类型，TypeScript会将Object.entries()遍历出的value默认推断为unknown类型，该类型不能直接作为React可渲染节点，因此抛出类型不匹配错误。

如果是TypeScript项目，先给cities声明明确类型：

// 明确cities是「键为字符串、值为字符串」的对象
const cities: Record<string, string> = {
  MCR: "Manchester",
  LDN: "London",
  NYC: "New York"
}

表格渲染部分修正为如下写法：

<tbody>
  <tr>
    <th>City Code</th>
    <th>City Name</th>
  </tr>
  {Object.entries(cities).map(([code, name]) => (
    // 每一组城市数据单独生成一行，给根节点加唯一key
    <tr key={code}>
      <td>{code}</td>
      <td>{name}</td>
    </tr>
  ))}
</tbody>

• 箭头函数返回JSX时，若用大括号{}包裹函数体，必须手动加return返回内容；若直接用圆括号()包裹JSX，会隐式返回内容，无需额外写return。
• React渲染列表时，每个遍历生成的根元素必须添加唯一的key属性，这里城市代码本身唯一，可以直接作为key值使用。
• TS项目中给对象提前声明对应类型，就能避免Object.entries返回值被推断为unknown的问题。
• 表格结构要符合HTML规范：表头单独占一行，每条数据对应独立的<tr>行，不要把所有数据单元格都堆在同一行内。

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