如何遍历对象并渲染为<li>标签，将Express接口返回对象转为对应JSX结构

你可以直接使用Object.entries()方法将接口返回的对象转换为键值对数组，再通过map方法遍历渲染即可，具体实现如下：

• 首先确认你从Express接口获取到的响应对象命名为resData，其结构为普通键值对对象即可直接处理
• 组件内渲染代码示例：

import React from 'react'

function YourComponent() {
  // 这里替换为你实际接口请求拿到的对象
  const resData = {
    Company: "DML",
    Address: "深圳市南山区",
    Phone: "13xxxxxxxxx",
    // 其余字段和你接口返回的对应即可
  }

  // 如果需要将英文键名转为中文展示，可提前定义映射关系
  const keyMap = {
    Company: "公司",
    Address: "地址",
    Phone: "联系电话"
    // 其余字段按需补充
  }

  return (
    <div>
      {Object.entries(resData).map(([key, value]) => (
        <React.Fragment key={key}>
          <li>{keyMap[key] || key}</li> : <li>{value}</li>
        </React.Fragment>
      ))}
    </div>
  )
}

export default YourComponent

注意事项：

1. 遍历生成JSX节点时必须添加唯一key属性，这里直接使用对象的唯一键名作为key即可
2. 这里使用<React.Fragment>（可简写为<>）包裹是为了不额外生成多余的DOM节点，完全匹配你要求的输出结构

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