0

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>
    );
    }
6
  • 1
    Deberías editar la pregunta y añadir el componente entero, porque con esos fragmentos es complicado adivinar qué pasa... aparte de que newVal será null Commented el 7 feb. 2020 a las 8:50
  • @PabloLozano ese es el problema que al limpiar el autocomplete o si selecciono un estado y lo borro aparece el error Cannot read property ' label' of null
    – senseilex
    Commented el 10 feb. 2020 a las 23:57
  • Creo que ese Autocomplete necesita cerrar "/>" y el "onTagsChange" no tendría que ser "this.onTagsChange"?. Concuerdo que necesitamos el componente entero y, si es posible, una captura de lo que le muestra en consola. Commented el 11 feb. 2020 a las 15:40
  • @MoisésHuamánC. estoy usando componentes funcionales donde no se utiliza el this
    – senseilex
    Commented el 11 feb. 2020 a las 16:16
  • Sigo sin entender el problema: newVal puede ser null... ¿si lo compruebas antes no solucionas el error? Commented el 11 feb. 2020 a las 20:53

1 respuesta 1

1

Al intentar acceder a una propiedad de un objeto nulo, es cuando te muestra ese error.. Dicho esto, para poderlo corregir, una forma que se me ocurre, es la siguiente:

Cambia:

onChange={(event, newVal)=>GuardarDireccion({target:{name:"label",value: newVal.label }}

Por:

onChange={(event, newVal)=>GuardarDireccion({target:{name:"label",value: dameLabel(newVal) }}

function dameLabel(newVal) {
  if (newVal != null && newVal != undefined) {
    return newVal.label;
  }

  return '';
}

De esta forma, el operador "?" interpretará si puedes acceder a la propiedad label o no, si puedes acceder, te devolverá el valor de label, de lo contrario, asignará un valor undefined a "value".

Espero te haya ayudado, un saludo!

9
  • Me aparece el siguiente error Support for the experimental syntax 'optionalChaining' isn't currently enabled con newVal?.label
    – senseilex
    Commented el 12 feb. 2020 a las 18:55
  • Vale, no es soportado por el navegador: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Modifico la respuesta, ahora te aviso Commented el 12 feb. 2020 a las 19:12
  • Ya está modificado @senseilex Commented el 12 feb. 2020 a las 19:16
  • Disculpa estoy copiando exactamente como lo puso en la respuesta, pero en esta parte value: dameLabel(newVal), dice que dameLabel no esta definido
    – senseilex
    Commented el 12 feb. 2020 a las 23:07
  • 1
    Si aunque pude haberme equivocado en donde ponerla, como la puso abajo del onchange yo asi la puse
    – senseilex
    Commented el 13 feb. 2020 a las 16:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.