Material UI Select Component - компонент меняет контролируемый ввод текста типа на неуправляемый

Question

Я пытаюсь изменить значение выбора ввода, а затем я получаю следующее предупреждение в консоли.

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

  };

Может кто-нибудь подсказать, в чем проблема?

Answer 1

Uncontrolled здесь означает, что вы можете установить значение компонента Select на неопределенное, это потому, что значение = {props.selectedValue} здесь. В этом случае props или selectedValue могут иметь значение null, поэтому он оказывается неуправляемым компонентом в этом.

Чтобы устранить предупреждение, вы можете добавить условие, чтобы проверить ноль и установить значение по умолчанию. значение = {props.selectedValue? props.selectedValue: ""}