如何将JS对象的键值对映射渲染为UI界面的表格内容

你可以借助Object.entries()方法将目标对象转为键值对数组，之后直接使用你熟悉的map方法遍历即可，全程不需要修改原data对象，仅通过一次循环就能完成需求：

完整实现代码 #

// 下划线转首字母大写空格分隔的工具函数，可按需复用
const formatKey = (rawKey) => {
  return rawKey.split('_')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

// 渲染部分，直接遍历即可同时拿到键和值
{Object.entries(data).map(([key, value]) => (
  <div key={key}>
    {formatKey(key)} : {value}
  </div>
))}

兼容旧环境的替代写法 #

如果运行环境不支持Object.entries()，可以换成Object.keys()实现，效果完全一致：

{Object.keys(data).map(key => (
  <div key={key}>
    {formatKey(key)} : {data[key]}
  </div>
))}

以上代码输出的渲染结果完全匹配你需要的格式：

Full Name : John Doe
Date Of Birth: 01-01-1990

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