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]
}))