Reactjs Can'；t使用物料界面选择组件重置选择

第一篇关于React的帖子！我是新来的，我尝试做一个级联下拉列表（3个级别），每个级别都有相同的值（相同的源）。还有其他函数可以验证重复选择，但这不是我问题的重点。当我选择元素时，它工作；数组“levels”已填充，禁用的属性有效，等等。但当我尝试清除所有值时，下拉列表（第2和第3）被禁用，但显示值

以下是a如何初始化状态列：

const [selectedColumns, setSelectedColumns] = useState({ levels: [] })

如何处理元素的选择（添加新选择时）：

清除所有功能（我尝试了多种解决方案，其中两种）：

我有3个下拉组件，看起来像这样：

<FormControl variant='outlined' theme={theme}>
  <InputLabel htmlFor='level1'>
    Level 1
  </InputLabel>
  <Select
    native
    value={selectedColumns.levels[0]}
    onChange={e => handleChange(e, 1)}
  name='level1'
  inputProps={{
    id: 'level1',
  }}>
  <option value='' />
  {data.map((column, i) => (
    <option key={i} value={column.key}>
      {column.text}
    </option>
  ))}
</Select>

一级
handleChange（e，1）}
name='level1'
输入道具={{
id:'level1'，
}}>
{data.map（（列，i）=>(
{column.text}
))}

下面是我单击“全部清除”按钮时的样子。您可以看到阵列his已清除，但仍显示其值

---

您是否有一个状态来处理3个下拉列表？是的，我做了一些测试，有3个状态，每个下拉列表一个，但看起来很糟糕，如果您尝试将默认值添加到这些下拉列表中会怎么样？此材质ui选择采用默认值参数。所以，在清除所有选项后，尝试设置默认值。@Mohit-hmm有意义。我只是尝试用一个空字符串数组初始化我的状态，当我用空字符串重新初始化状态时，它就会工作

const clearAll = () => {
  setSelectedColumns(prev => ({
    ...prev,
    levels: selectedColumns.levels.filter((column, j) => false),
  }))
}

const clearAll = () => {
  setSelectedColumns({ levels: [] })
}

<FormControl variant='outlined' theme={theme}>
  <InputLabel htmlFor='level1'>
    Level 1
  </InputLabel>
  <Select
    native
    value={selectedColumns.levels[0]}
    onChange={e => handleChange(e, 1)}
  name='level1'
  inputProps={{
    id: 'level1',
  }}>
  <option value='' />
  {data.map((column, i) => (
    <option key={i} value={column.key}>
      {column.text}
    </option>
  ))}
</Select>