Reactjs 从下拉列表中选择项目时，“反应材质UI选择”不会更改值

这是我代码的一部分

我获取药物和硬编码类别的基础上，他们的类。然后我映射类别，检查药物是否与类别匹配。如果是，则菜单项显示在特定列表子标题下

 useEffect(() => {
    fetch('/api/drugs')
    .then(response => response.json())
    .then(json => setDrugs(json))

}, [drugs])

const [categories, setCategories] = React.useState([
  {
    id: 1,
    name: "Miscellaneous analgesics"
  },
  {
    id: 2,
    name: "Benzodiazepines"
  },
  {
    id: 3,
    name: "Aminopenicillins"
  },
  {
    id: 4,
    name: "Miscellaneous antimalarials"
  }
]);

const handleChange = (event) => {
  console.log(event.target.value);
  setPrescription({...prescription, drug: event.target.value});
}

<FormControl className={classes.formControl}>
        <InputLabel htmlFor="grouped-select">Pharmaceutical Drugs</InputLabel>
        <Select 
         id="grouped-select" 
         value={prescription.drug ? prescription.drug : ""} 
         onChange={handleChange}>
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {categories.map(category => 
       (<span>
            <ListSubheader key={category.id}>{category.name}</ListSubheader>
            {drugs.map(drug => drug.class===category.name ? <MenuItem key={drug._id} value={drug.name}>{drug.name}</MenuItem> : null)}
       </span>)
    )}
        </Select>
        <FormHelperText>Select a Pharmaceutical Drug to prescribe.</FormHelperText>
      </FormControl>

然后我似乎从handleChange中的console.log接收到一个值，但是，这里的所有内容都返回一个未定义的值。我研究了React Developer工具，中的每个呈现菜单项都有一个值、一个id和所有内容

{categories.map(category => 
       (<span>
            <ListSubheader key={category.id}>{category.name}</ListSubheader>
            {drugs.map(drug => drug.class===category.name ? <MenuItem key={drug._id} value={drug.value}>{drug.name}</MenuItem> : null)}
       </span>)
    )}

---

给那些仍然关心的人！问题在于renderValue。我创建了一个renderValue函数，并将其传递给select并返回药物的值。如果你们被卡住了，确保检查材料界面选择文档。我的后端或前端没有问题

---

解决了

您的MenuItem值为空。我已经查看了react developer工具，但事实并非如此。该键在任何地方都被正确分配。您的选择也没有值。请参阅上面我编辑的文章。

{categories.map(category => 
       (<span>
            <ListSubheader key={category.id}>{category.name}</ListSubheader>
            {drugs.map(drug => drug.class===category.name ? <MenuItem key={drug._id} value={drug.value}>{drug.name}</MenuItem> : null)}
       </span>)
    )}