Estoy tratando de cambiar el valor de Seleccionar entrada y luego recibo la siguiente advertencia en la consola.
index.js:1446 Advertencia: un componente está cambiando una entrada controlada de tipo texto para que no esté controlada. Los elementos de entrada no deben cambiar de controlado a no controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente.
Pero estoy actualizando el estado solo de la manera correcta. Aquí está mi código.
<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>Y la funcionalidad handleselectchange está aquí.
handleSelectChange = ({target: {name,value}}) => { console.log(name); console.log(value); this.setState({ serviceRequest: { selectedService: value } }); }Y la declaración del objeto de estado está debajo
state = { open: false, selectedDate: new Date(), selectedTime : new Date(), mailDetails :{ name:"", email:'', message:'' }, serviceRequest: { name: '', email: '', mobileNumber:'', address:'', landMark:'', selectedService:'' } };¿Alguien puede sugerir cuál es el problema?
No controlado aquí significa que puede estar configurando el valor del componente Select como indefinido, esto se debe a que value={props.selectedValue} aquí. En esto, los accesorios o el valor seleccionado pueden ser nulos, por lo que resulta ser un componente no controlado en eso.
Para resolver la advertencia, puede agregar una condición para verificar nulo y establecer el valor predeterminado.
value={props.selectedValue ? props.selectedValue : " "}
O para facilitar la sintaxis usando el operador coalescente nulo (??)
value={props.selectedValue ?? " "}
lo mismo que la respuesta aceptada, pero verifique que no esté definido y proporcione un valor predeterminado con un operador coalescente nulo (??)
value={props.selectedValue ?? ""}solo puedes cambiar
value={props.selectedService}para
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>