javascript - 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>
          )
})}

补充:除了上述之外，检查第一个数据集(对象)和我的数据集 - 对象数组然后使用此检查区分两者的最佳方法是什么在正确的 Material-UI Select 代码中显示数据的方法？

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 精简并避免渲染函数过载。