ReactJS：如何在map()中获取对象数组的键

要获取对象的键来设置输入框的id和name，你需要替换Object.values()为**Object.entries()**——它会返回[键名, 值]格式的数组，让你在map迭代中直接拿到对象的键。同时要注意，你原来使用的全局labelIndex会在组件重渲染时不断累加，导致标签和输入框的对应关系混乱，建议改用基于键的索引来匹配labelArr。

修改后的代码示例 #

const labelArr = [
    "Name", "IP Address", "Port", "SSH User", "SSH Port", "License"
];        

const state = [
    {name: "abc", ipaddr: "192.168.1.2", port: 5000},
    {sshuser: "xyz", sshport: 21, license: "license.txt"}
];

// 整理所有字段键，和labelArr的顺序一一对应
const allFieldKeys = [...Object.keys(state[0]), ...Object.keys(state[1])];

{state.map((item, index1) => (
  <tr key={index1}>
    {Object.entries(item).map(([key, val]) => {
      // 通过键名找到对应的标签索引
      const labelIndex = allFieldKeys.indexOf(key);
      return (
        <td key={key}>
          <b>{labelArr[labelIndex]}</b><br/>
          <input 
            required 
            type="text"
            id={key}
            name={key}
            onChange={(e) => {}}
            value={val}
          />
        </td>
      );
    })}
  </tr>
))}

关键说明 #

1. Object.entries(item)：遍历对象的键值对，每次迭代返回[key, val]，通过解构直接拿到键名key，这正是你需要的输入框id/name值。
2. 避免全局索引变量：用allFieldKeys.indexOf(key)获取当前键对应的标签位置，解决了全局labelIndex累加导致的混乱问题。
3. 更稳定的key值：将<td>的key设置为对象的键名，比递增数字更可靠，因为键名是唯一且固定的。

更健壮的优化方案（可选） #

如果后续字段可能调整，建议直接把标签和键名关联成配置数组，维护性更强：

// 统一配置标签和对应的键名
const fieldConfig = [
  { label: "Name", key: "name" },
  { label: "IP Address", key: "ipaddr" },
  { label: "Port", key: "port" },
  { label: "SSH User", key: "sshuser" },
  { label: "SSH Port", key: "sshport" },
  { label: "License", key: "license" }
];

// 合并state为单个对象，方便取值
const formData = { ...state[0], ...state[1] };

// 直接按配置渲染
<tr>
  {fieldConfig.map(({ label, key }) => (
    <td key={key}>
      <b>{label}</b><br/>
      <input 
        required 
        type="text"
        id={key}
        name={key}
        onChange={(e) => {}}
        value={formData[key] || ''}
      />
    </td>
  ))}
</tr>

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