Javascript 使用对象数组作为源进行反应材质UI选择

希望我能得到一些帮助。我目前正在学习一个使用React Material UI的教程，特别是一个简单的Select下拉列表

他们在代码中使用以下json数据集对象片段，如下所示：

{
  "AF": "Afghanistan",
  "AL": "Albania",
  "DZ": "Algeria",
  "AS": "American Samoa",
  "AD": "Andorra",
  "AO": "Angola",
  "AI": "Anguilla"
}

他们用于构建select的React代码如下所示，这里的选项是上面的json数据集：

  return (
    <TextField>
      {Object.keys(options).map((item, pos) => {
        return (
          <MenuItem key={pos} value={item}>
            {options[item]}
          </MenuItem>
        )
      })}
    </TextField>
  );

我的问题是，如何实现上述React代码来构建我的React Material UI Select，但我不想使用对象，而是想使用对象数组，其中Select下拉列表中显示的名称是

job\u name

，返回值是

job\u id

我尝试了以下操作，但未返回任何结果：

{options.map(option => {
          return (
            <MenuItem key={option.value} value={option.value}>
              {option.key}
            </MenuItem>
          )
})}

{options.map（option=>{
返回(
{option.key}
)
})}

---

添加：除上述内容外，在第一个数据集（对象）之间进行检查的最佳方式是什么和我的数据集-对象数组，然后使用此检查来区分在正确的材质UI选择代码中显示数据的两种方法？

您需要以不同的方式访问项目选项，因为在数组中的对象中未设置键和值。可能的选项有

job\u id

和

job\u name

所以试试这个：

{options.map(option => {
          return (
            <MenuItem key={option.job_id} value={option.job_id}>
              {option.job_name}
            </MenuItem>
          )
})}

---

这会起作用，但可能应该单独完成，以保持jsx精简并避免渲染函数过载。

我几乎做到了，只是没有使用正确的属性。我添加了一个关于区分黑白对象和对象数组的附加问题，因为我想在代码中检查这两种类型。

{options.map(option => {
          return (
            <MenuItem key={option.job_id} value={option.job_id}>
              {option.job_name}
            </MenuItem>
          )
})}

{(Array.isArray(options) ? options.map(({job_id, job_name})=> ([job_id, job_name])) : Object.entries(options)).map(([key,value])=> {
          return (
            <MenuItem key={key} value={key}>
              {value}
            </MenuItem>
          )
})}