• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

356
Views
Material UI Seleccionar componente: un componente está cambiando una entrada controlada de tipo texto para que no esté controlada

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?

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

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 ?? " "}

about 3 years ago · Santiago Trujillo Report

0

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 ?? ""}
about 3 years ago · Santiago Trujillo Report

0

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>
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error