Usando el autocomplete de material-ui, con useEffect
traigo los datos desde la API y muestra la lista de los nombres de los estados ,si selecciono un y doy click en el boton guardar, el registro se guarda correctamente, pero si escojo un valor y limpio el autocomplete aparece el siguiente error:
Paused on exception TypeError: Cannot read property ' label' of null
¿Como puedo corregir este error?
import React, { useState,useEffect} from 'react';
import axios from 'axios';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete'
function AgregarDireccion(props) {
const [direccion, setDireccion] = useState({ label: '', ciudad: '', codigo_postal:0 })
const[lista, setLista]=useState({Datos:[]});
useEffect(()=>{
const getList=async()=>{
const response =await axios.get(urlciudad);
setLista(response.data);
}
getList();
},[]);
const defaultProps={
options:location.Estados,
getOptionLabel: option => option.estado ,
};
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 }}
{...defaultProps}
id="city"
autoComplete
onChange={(event, newVal)=>GuardarDireccion({target:{name:"label",value: newVal.label }}
)}
renderInput={params => (
<TextField {...params} label="Estado" margin="normal" variant="outlined" />
)}
/>
<TextField
name="ciudad"
label="Ciudad"
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>
);
}