材质 UI 选择组件 - 组件正在将文本类型的受控输入更改为不受控制

Question

我正在尝试更改 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 功能就在这里。

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 组件的值设置为未定义，这是因为value={props.selectedValue}此处。在这种情况下，props 或 selectedValue 可能为 null，因此它被证明是一个不受控制的组件。

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

value={props.selectedValue ? props.selectedValue : " "}

Answer 2

对于我的情况，我必须在控制器组件上设置默认值

<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>
    );
  }}
/>

Answer 3

与接受的答案相同，但检查未定义并使用无效合并运算符（??）提供默认值

value={props.selectedValue ?? ""}