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

此处不受控制意味着您可能将“选择”组件的值设置为“未定义”，这是因为此处value = {props.selectedValue}。在这种情况下，props或selectedValue可能为null，因此它实际上是不受控制的组件。

要解决该警告，您可以添加条件以检查null并设置默认值。 value = {props.selectedValue？ props.selectedValue：“”}

Answer 2

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

value={props.selectedValue ?? ""}

Answer 3

你只能改变

value={props.selectedService}

到

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

 <Select
    ***value={props.selectedService ? 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>

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

3 个答案: