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

【问题标题】：Material UI Select Component- A component is changing a controlled input of type text to be uncontrolledMaterial UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制
【发布时间】：2019-08-21 02:29:22
【问题描述】：

我正在尝试更改 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:''
  }
};

谁能提出问题是什么？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

此处不受控制意味着您可能将 Select 组件的值设置为未定义，这是因为value={props.selectedValue} 在这里。在这种情况下，props 或 selectedValue 可能为 null，因此它是一个不受控制的组件。

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

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

或者为了简单的语法使用空值合并运算符 (??)

value={props.selectedValue ?? " "}

【讨论】：

这将产生一个问题：您必须控制您的输入，或使其成为受控组件。一般来说，根据我的个人经验，在 React 中，您希望尽可能避免受控输入。受控输入通常会将更详细的逻辑放入您的代码中，如果您不需要验证等额外功能，则它是冗余代码。此外，由于必须处理状态，受控组件的性能总是低于不受控制的组件。当您的表单中有很多字段时，这一点尤其明显。
@allicanseenow 我更喜欢在我的全局应用程序状态中拥有所有内容，以便在我“验证”时从中选择需要的任何内容。对于这个特定问题，我只是添加了一个默认值以避免undefined 步骤：const {selectedValue = ''} = props;

【解决方案2】：

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

value={props.selectedValue ?? ""}

【讨论】：

您可以通过编辑来改进已接受的答案。

【解决方案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>

【讨论】：