Tengo un formulario creado con material ui, uno de los campos es un autocomplete, con useEffect traigo los datos de mi API para cargar el AUTOCOMPLETE.
La funcion GuardarDireccion llama a setDireccion que actualiza el estado de la direccion con el nuevo valor,
Al cargar la pagina si funciona el autocomplete porque me muestra la lista de estados de la API, el problema es que al seleccionar una opcion de la lista. al hacer un console.log puedo notar que el campo autocomplete no esta tomando el value pero los otros campos si, y cuando guardo el registro me aparece vacio el campo estado.
event.target.name
Undefined
event.target.value
0
event.target.name
ciudad
event.target.value
Mina
event.target.name
codigo_postal
event.target.value
78965
Codigo
function AgregarDirecciones() {
const classes = useStyles();
const[lista, setLista]=useState({Datos:[]});
useEffect(()=>{
const getList=async()=>{
const response =await axios.get(urlciudad);
setLista(response.data);
}
getList();
},[]);
const initialState = { estado: '', ciudad: '', codigo_postal:0 }
const [direccion, setDireccion] = useState(initialState)
function GuardarDireccion(event) {
setDireccion({...direccion, [event.target.name]: event.target.value})
}
function handleSubmit(event) {
event.preventDefault();
async function agregarDireccion() {
await axios.post(url, direccion);
}
agregarDireccion();
}
return (
<div >
<form onSubmit={handleSubmit}>
<Autocomplete
style={{ width: 300 }}
value={direccion.estado}
onChange={GuardarDireccion}
options={lista.Datos}
classes={{
option: classes.option,
}}
autoHighlight
getOptionLabel={option => typeof option === 'string' ? option : option.estado}
renderOption={option => (
<React.Fragment>
{option.estado}
</React.Fragment>
)}
renderInput={params => (
<TextField {...params} label="Estado" margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
...params.inputProps,
autoComplete: 'disabled',
}}/>
)}
/>
<TextField
name="State"
label="State"
value={direccion.ciudad}
onChange={GuardarDireccion}
margin="normal"
/>
<TextField
name="codigo_postal"
label="Codigo postal"
value={direccion.codigo_postal}
onChange={GuardarDireccion}
margin="normal"
/>
<Button
variant="contained"
type="submit">
Guardar
</Button>
</form>
</div>
);
}