1

Tengo una función (insertPicture) que hace una llamada a una API y devuelve una foto (una url) de una ciudad que ha elegido el usuario. Con la respuesta de esta API asigno la variable pictureData

El problema es que a veces esta API no encuentra ninguna foto y entonces la variable pictureData se le asigna undefined.

Como luego hay otra función (addMarkUp) que usa esta variable pictureData cuando la va a usar el programa se rompe al ser pictureData undefined. En concreto es cuando la función (addMarkUp) va a asignar pictureData al state del componene.

Mi objetivo es que antes de que la segunda función use la variable pictureData, en caso de que sea undefined, tener una lógica anterior que asigne una dirección url universal (una imagen universal que yo decida) a pictureData, de forma que la segunda función nunca se encuentra con un undefined

Este es mi código:

addMarkUp = async (event) => {
        event.preventDefault();

        const pictureData = await this.insertPicture(this.state.new_site);
       
        Geocode.fromAddress(this.state.new_site).then(
      
            response => {
                const { lat, lng } = response.results[0].geometry.location;
                this.setState(prevState => ({
                    // Aqui el programa se rompe si pictureData es undefined
                    user_sites: [{
                        "name": this.state.new_site, "id": this.state.user_sites.length + 1, coordinates: [lat, lng], "urlpic": pictureData.photos[0].src["small"]
                    }, ...prevState.user_sites]
                }))
                this.updateDynamo()
            },
            error => { console.error(error); }
        );
    }

async insertPicture(site) {
          return pexelsClient.search(site, 1, 1).catch(function(e) {
          console.err(e);
        });
    }

Esto es lo que he probado:

addMarkUp = async (event) => {
        event.preventDefault();

        let pictureData = await this.insertPicture(this.state.new_site);
        Geocode.fromAddress(this.state.new_site).then(
            response => {
            if(pictureData === undefined){
          pictureData = "www.urluniversal.com"
        }
                const { lat, lng } = response.results[0].geometry.location;
                this.setState(prevState => ({
                    user_sites: [{
                        "name": this.state.new_site, "id": this.state.user_sites.length + 1, coordinates: [lat, lng], "urlpic": pictureData.photos[0].src["small"]
                    }, ...prevState.user_sites]
                }))
                this.updateDynamo()
            },
            error => { console.error(error); }
        );
    }

Error:

AddSite.js:69 Uncaught TypeError: Cannot read property 'src' of undefined
at AddSite.<anonymous> (AddSite.js:69)

La linea 69 es esta:

this.setState(prevState => ({
                user_sites: [{
                    "name": this.state.new_site, "id": this.state.user_sites.length + 1, coordinates: [lat, lng], "urlpic": pictureData?.photos[0].src["small"] ?? 'url por defecto'

                }, ...prevState.user_sites]
            }))

1 respuesta 1

1

Usa el operador ? para evitar error si pictureData es undefined y luego usa ?? para retornar la url por defecto.

Reemplaza:

pictureData.photos[0].src["small"]

por:

pictureData.photos[0]?.src["small"] ?? 'url por defecto'
6
  • Es verdad no había caído en eso. ¿Sabes dónde podría poner ese código? Porque he probado a ponerlo dentro de la función Geocode.fromAddress y me sigue dando undefined el 4 abr. 2020 a las 18:21
  • Actualicé la respuesta, encontré una forma más breve.
    – Lobos
    el 4 abr. 2020 a las 18:27
  • Tambien pensaba asi pero se sigue rompiendo. Sino Voy a intentar poner un repo online de la app el 4 abr. 2020 a las 18:30
  • Agrega el error que te da
    – Lobos
    el 4 abr. 2020 a las 18:33
  • 1
    Entonces photos es el que está undefined. mueve el ? y colócalo después de photos
    – Lobos
    el 4 abr. 2020 a las 18:41

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.