使用没有任何值的 Select 组件时发出警告

如何解决使用没有任何值的 Select 组件时发出警告

我在代码中使用了 <InputLabel> 和 Select 和 MenuItem 组件，如下所示：

<div className="form-field full-width-field ">
                   
                    <InputLabel>Q3.Is this the correct data?</InputLabel>
                        <Select
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        value={''}
                       onChange={handleChange}
                        >
                        <MenuItem value={'Y'}>Yes</MenuItem>
                        <MenuItem value={'N'}>No</MenuItem>
                        
                        </Select>
                    </div>

因此，当我在 value = {''} 中使用如上所示的 Select 时，我没有看到代码中有任何错误。但是，当用户选择Yes或No时，屏幕上什么也没有显示，如下图：

但是，当我注释掉 value = {''} 部分并像这样使用它时：

                     <Select
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        //value={''}
                       onChange={handleChange}
                        >

它在屏幕上显示用户选择 Yes 或 No，但我在控制台中不断收到以下警告：红色：

警告：组件正在更改不受控制的类型输入 undefined 被控制。输入元素不应从 不受控制到受控制（反之亦然）。决定使用 在整个生命周期内受控或不受控制的输入元素 组件。

我该如何解决这两个问题？

解决方法

让您的组件受到控制。

const [answer,setAnswer] = useState('');

function handleChange(event) {
    setAnswer(event.target.value);
}

<div className="form-field full-width-field ">
    <InputLabel>Q3.Is this the correct data?</InputLabel>
    <Select labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={answer}
            onChange={handleChange}>
        <MenuItem value={'Y'}>Yes</MenuItem>
        <MenuItem value={'N'}>No</MenuItem>                        
    </Select>
</div>