带有下拉 material ui 项目的文本字段不会显示 ReactJS

Question

为什么项目没有出现在下拉列表中？我有一个数组，我想在下拉列表中显示哪些项目：

const categoryDB = [
  "Notebook",
  "Desktop PC",
  "Monitor"
]

我的 React/materialui 元素如下所示：

    <TextField style={tfBigStyling} select required="true" margin="normal" label="Category" size="medium">
      {categoryDB.map((option) => (
        <MenuItem key={option.value} value={option.value}>
        {option.label}
      </MenuItem>
    ))}</TextField>

但是，如果我查看该网站，只会看到带有空下拉列表的文本字段。我做错了什么？如何将 categoryDB 的那些项目设置为下拉列表？提前致谢

Answer 1

您的数组仅包含字符串，不包含对象，因此在您的映射函数中不应引用 .value 或 .label，而应引用 option。或者，您可以将原始数组修改为：

const categoryDB = [
  {
    label: "Desktop PC",
    value: 1
  },
  {
    label: "Notebook",
    value: 2
  },
  {
    label: "Monitor",
    value: 3
  }
]

带有下拉 material ui 项目的文本字段不会显示 ReactJS

Textfield with dropdown material ui items won't show ReactJS

javascript

drop-down-menu

reactjs

material-ui