React Material-UI Select 使用对象数组作为源

Question

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

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

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

他们用来构建 select 的 React 代码如下，其中 options 这里是上面的 json 数据集：

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

现在我正在尝试构建与上面类似的东西，但我的数据集实际上是一个对象数组，即：

[
    {
        "job_id": 1,
        "job_name": "Engineer"
    },
    {
        "job_id": 2,
        "job_name": "Scientist"
    },
    {
        "job_id": 3,
        "job_name": "Teacher"
    }
]

我的问题是，如何实现上述 React 代码来构造我的 React Material UI Select，但我不想使用对象，而是使用我的对象数组，其中选择下拉列表中显示的名称和返回job_name值是job_id？

我已尝试以下操作，但没有返回任何内容：

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

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

Answer 1

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

所以试试这个：

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

将在每个项目上调用 Map，以便此处的选项是数组中的元素之一。

更新：要区分对象是否是数组，您可以使用Array.isArray：

{(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>
          )
})}

这可以工作，但也许应该单独完成，以保持 jsx 的精简并避免渲染函数过载。