React联动下拉框问题：选中Category后无法选择productCategory

我在React项目中实现了两级联动下拉框：第一级Category从dataTables.jsx的itemTables循环渲染，选中CAHS/CASE时，第二级productCategory对应渲染CAHScategory/CASEcategory的选项。但点击productCategory下拉框时无任何反应，无法选择选项。

相关代码 #

AddProduct.js

const [itemName, setItemName] = useState({
    category: '',
    productCategory: '',
  })

  const CAHScategory = [
    'CAHS Merchandise',
    'CAHS Related Softwares',
    'Clinical Equipments',
    'Others',
  ]
  const CASEcategory = [
    'CASE Merchandise',
    'CASE Related Softwares',
    'Laboratory Equipments',
    'Others',
  ]

   let Itemtype = null
   if(itemName.category === 'CAHS'){
    Itemtype = CAHScategory
   }
   else if(itemName.category === 'CASE'){
    Itemtype = CASEcategory
   }

  return (
     <FormControl fullWidth>  
              <InputLabel id="demo-simple-select-label">Category</InputLabel>
            <Select
              fullWidth
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              name="categories"
              defaultValue=""
              label="categories"
              onChange={(e) => setItemName({...itemName, category: e.target.value})}
              required
            >
                {itemTables.map((item) =>(
                  <MenuItem key={item.id} value={item.cat}>
                      {item.name}
                  </MenuItem>              
              ))}
                
            </Select>
            </FormControl>
            <FormControl fullWidth>  
              <InputLabel id="demo-simple-select-label">Product Category</InputLabel>
            <Select
              fullWidth
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              name="productCategory"
              defaultValue=""
              label="productCategory"
              onChange={(e) => setItemName({...itemName, productCategory: e.target.value})}
              required
            >         
               {Itemtype ? (
                Itemtype.map((el) => <MenuItem key={el}>{el}</MenuItem>)
               ): null}
            </Select>
       </FormControl>
  )

dataTables.jsx

export const itemTables =[
    {
        id: '1',
        name: "College of Allied Health and Sciences",
        cat: 'CAHS',
        to: '/category/CAHS',
        img: 'https://i.ibb.co/D98jG7d/312498729-1132402804318856-1848067548745320262-n.jpg',
      
    },
    {
        id: '2',
        name: "College of Arts, Sciences and Education",
        cat: 'CASE',
        to: '/category/CASE',
        img: 'https://i.ibb.co/LSsHw2T/102719225-104074154675775-86515862277755112-n.jpg',

    },
]

问题原因 #

二级下拉框的<MenuItem>未设置value属性，Material-UI的Select组件依赖该属性识别选中项，缺少它会导致点击选项无法触发状态更新，也无法完成选择。此外，两个Select组件的id和labelId重复，会引发DOM标识冲突。

修复方案 #

1. 给二级下拉框的<MenuItem>添加value属性，与选项文本保持一致；
2. 修改二级Select的id和labelId为唯一值，避免冲突。

修复后的代码片段 #

<FormControl fullWidth>  
  <InputLabel id="demo-simple-select-product-label">Product Category</InputLabel>
<Select
  fullWidth
  labelId="demo-simple-select-product-label"
  id="demo-simple-select-product"
  name="productCategory"
  defaultValue=""
  label="productCategory"
  onChange={(e) => setItemName({...itemName, productCategory: e.target.value})}
  required
>         
  {Itemtype ? (
    Itemtype.map((el) => <MenuItem key={el} value={el}>{el}</MenuItem>)
  ): null}
</Select>
</FormControl>

内容的提问来源于stack exchange，提问作者Zurcemozz