javascript - Material UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制

Question

我正在尝试更改 Select 输入的值，然后我在控制台中收到以下警告。

index.js:1446 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

但我只是以正确的方式更新状态，这是我的代码

 <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 功能在这里。

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:''
  }
};

任何人都可以提出问题所在吗？

Answer 1

这里不受控制的意思是你可能将Select组件的值设置为undefined， 这是因为 value={props.selectedValue} 这里。在此 props 或 selectedValue 可能变为 null，因此它变成了一个不受控制的组件。

要解决警告，您可以添加条件以检查 null 并设置默认值。

value={props.selectedValue ? props.selectedValue:“”

或者使用无效合并运算符 (??) 的简单语法

value={props.selectedValue ?? ""