材质UI下拉列表不受控制

Question

我是Material UI的新手，有一个问题。我有一个可重复使用的下拉过滤器，它是从数组中填充的。一切都按照我希望的方式运行，但我不断收到控制台错误，即组件正在更改和输入不受控制。问题是，如果我添加一个默认值(值="(来消除不受控制的错误，下拉列表将不会在输入中显示我选择的筛选选项，只是一个空白。如何在控制组件的同时仍向用户显示所选的筛选选项。

const status = [
{id: 1, label: '...', value: ''}, 
{id: 2, label: 'Active', value: 48},
{id: 3, label: 'Inactive', value: -1},
{id: 4, label: 'On Hold', value: 48654},
{id: 5, label: 'Out Of Spec', value: 50989},
]
<DropdownFltr
prompt='Status...'
options={status}
onChange={handleFilterValue}
/>

export default function DropdownFltr(props) {
const { error=null, options, prompt, onChange, value, ...other } = props;
return(
<>
<FormControl>
<InputLabel>{prompt}</InputLabel> 
<Select
value=''  // <<< Causes issues, but fixed uncontrolled error
onChange={onChange}
{...other}
{...(error && {error:true, helperText:error})}
>
{options.map((option, id) => (
<MenuItem 
key={option.id} 
value={option.value} 
>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
</>
)
}

Answer 1

在组件选择中添加默认值

<Select
defaultValue={''}
/>