Estoy trabajando con React y material-ui. Me di cuenta de que tengo una advertencia con el componente Autocompletar cuando intento enviar el formulario, así que intenté hacer algo realmente básico como en la documentación:
let Form = props => { return( <form noValidate onSubmit={handleSubmit} > <Autocomplete id="combo-box-demo" options={[{id:1,name:"test"},{id:2, name:"test2"}]} getOptionLabel={(option) => option.name} style={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />} />y cuando trato de enviar el formulario me sale el siguiente error:
Material-UI: el valor proporcionado para Autocompletar no es válido. Ninguna de las opciones coincide con {"id":1,"name":"test"} . Puede usar la propiedad getOptionSelected para personalizar la prueba de igualdad.
También me doy cuenta de que si configuro las opciones en el estado del componente, no hay ninguna advertencia (solo cuando se configuran como una constante). Así que me pregunto si algunos de ustedes tienen alguna idea de este comportamiento. Muchas gracias de antemano.
versión 5.0
isOptionEqualToValue={(opción, valor) => opción.valor === valor.valor}
Creo que no debería usar <form> para envolver el componente AutoComplete . Debe establecer el valor para AutoComplete y usar una función para manejar el botón de clic para enviar.
Prueba esto:
let Form = props => { const [value, setValue] = useState({}) const handleOnSubmit = (value) => { setValue(value) ... } return( <div> <Autocomplete id="combo-box-demo" value={value} options={[{id:1,name:"test"},{id:2, name:"test2"}]} getOptionLabel={(option) => option.name} style={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />} /> <Button onClick={() => handleOnSubmit(value)}>Submit</Button> </div> ) }esto funcionó,
getOptionSelected={(option, value) => option.value === value.value}https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194
Básicamente, la razón por la que recibe la advertencia es una implementación predeterminada de getOptionSelected en la versión 4.xx:
getOptionSelected = (option, value) => option === valueEn su caso, seleccionando un valor ocurre la siguiente comparación:
// option === value: {id:1, name:"test"} === {id:1, name:"test"} // false Obviamente, puede ser true en algunas circunstancias. En este caso particular, es false debido a que los objetos apuntan a las diferentes instancias.
¡Solución! Tienes que sobrescribir la implementación de getOptionSelected :
<Autocomplete getOptionSelected={(option, value) => option.id === value.id} ...otherProps />[Actualización] Tenga en cuenta que en la versión 5.xx se cambió el nombre de la propiedad:
- getOptionSelected={(option, value) => option.id === value.id} + isOptionEqualToValue={(option, value) => option.id === value.id}