物料UI选择组件-组件正在将文本类型的受控输入更改为不受控制
我试图更改Select的值，然后在控制台中得到以下警告。
index.js:1446警告:组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控制(反之亦然)。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。
但是我只是以正确的方式更新状态，这是我的代码
<Select
value={props.selectedService}
onChange={props.handleSelectChange}
inputProps={{
name: 'selectedService',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
<MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
<MenuItem value="Rolling">Rolling</MenuItem>
</Select>而换手功能就在这里。
handleSelectChange = ({target: {name,value}}) => {
console.log(name);
console.log(value);
this.setState({
serviceRequest: {
selectedService: value
}
});
}状态对象声明如下
state = {
open: false,
selectedDate: new Date(),
selectedTime : new Date(),
mailDetails :{
name:"",
email:'',
message:''
},
serviceRequest: {
name: '',
email: '',
mobileNumber:'',
address:'',
landMark:'',
selectedService:''
}
};有谁能建议一下有什么问题吗？
回答 4
Stack Overflow用户
发布于 2022-05-20 01:19:57
在我的情况下，我必须在Controller组件上设置一个默认值
<Controller
name="stackoverflow"
rules={{ required: 'Please select a stackoverflow' }}
control={control}
defaultValue={''} // <---------- HERE
render={({ field, fieldState }) => {
return (
<FormControl>
<InputLabel id="stackoverflow-label">stackoverflow</InputLabel>
<Select
id="stackoverflow-select"
label="stackoverflow"
labelId="stackoverflow-id"
error={!!fieldState.error}
{...field}
>
<MenuItem value={i ?? ''} key={i}>
{i}
</MenuItem>
</Select>
{fieldState.error ? (
<FormHelperText error>
{fieldState.error?.message}
</FormHelperText>
) : null}
</FormControl>
);
}}
/>Stack Overflow用户
发布于 2019-03-30 09:16:00
这里不受控制意味着您可能会将Select的值设置为undefined，这是因为这里的value={props.selectedValue}。在这种情况下，道具或selectedValue可能为空，因此它是其中一个不受控制的组件。
要解决警告，可以添加条件以检查null并设置默认值。
value={props.selectedValue ? props.selectedValue : " "}
或者使用空合并运算符(??)来简化语法。
value={props.selectedValue ?? " "}
Stack Overflow用户
发布于 2020-10-13 02:14:04
相同的接受答案，但检查未定义，并提供默认值为空合并运算符(？)
value={props.selectedValue ?? ""}https://stackoverflow.com/questions/55429442
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号