Te hice un comentario con la respuesta, pero me pareció interesante y apropiado para el sitio explicar bien qué sucede en este caso.
Este tipo de errores son normales cuando empezamos a concatenar theneables
Para empezar a explicar debemos tener claro cómo funciona una promesa, y sin irnos al nivel super técnico de cómo están construidas, debes tener en cuenta que una promesa es un valor que no se va a resolver en el instante que quieras, si no en cualquier otro momento, es decir, tal cual Javascript nos está prometiendo que nos devolverá un resultado.
Como la promesa no se va a resolver justo cuando la necesitemos en el código de ejecución, si no que lo hará cuando encuentre un espacio para hacerla, entonces la forma que tenemos para poder interactuar con ese valor que retorna la promesa es por medio del método then
el cuál recibe como parámetro un callback (es una función como cualquier otra en Javascript). Dicho callback recibirá como parámetro el valor de la promesa una vez es resuelto, es decir:
const callback = (value) => { console.log(value) };
algunaTareaAsincronaQueRetornaUnaPromesa()
.then(callback) // <= Aquí ponemos nuestra función
Lo que hará esto es que cuando la tarea halla finalizado, entonces mostrará el valor en la consola. Super sencillo.
Otro asunto a tener en cuenta es que las promesas son encadenables o theneables es decir, podemos hacer tantos then queramos o necesitemos siempre que retornemos otra promesa dentro del then. Esto es muy útil y es precisamente lo que estás haciendo.
AHORA SI TU CÓDIGO
Si empezamos a trabajar de una forma un poco más declarativa podríamos hacer con nuestro ejemplo algo así:
algunaTareaAsincronaQueRetornaUnaPromesa()
.then(console.log) // Mostrará el valor cuando esté disponible
Básicamente en el fondo de como fueron programadas las promesas el está tomando esa función que le pasamos y la resuelve, un ejemplo de lo que sucede puede ser esto:
if (hayValorDisponible) {
callback(valorDisponible);
}
Y si tenemos en cuenta que el callback que pasamos es console.log
, entonces sería algo así:
if (hayValorDisponible) {
console.log(valorDisponible);
}
Esto nos ayuda a identificar la fuente de tu problema. entonces entendemos que lo que sucede es esto al momento de resolver la promesa:
if (hayValorDisponible) {
fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)(valorDisponible);
}
Lo cual obviamente es un error, ya que si te das cuenta al momento de crear un objeto a partir de fetch
te retorna un objeto no callable
por lo que no podrías hacer algo como esto fetch(url)(valor)
, que es precisamente lo que sucede.
La mejor forma de solucionar tu problema es partiendo de una función que llame a al fetch
. Quedando así tu código:
componentDidMount(){
fetch(`http://localhost:5000/tour/${this.state.id}`)
.then(response => response.json())
.then(tourJson => this.setState({ tour: tourJson }))
.then(() => fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
.then(response => response.json())
.then(console.log)
);
Como te das cuenta cambié dos líneas de tu código, en la primera volvemos una función la llamada al fetch, y la segunda línea que cambié es cuando le haces un console.log
a tu respuesta. Básicamente porque response.json()
retorna otra promesa, por esa razón al momento de mostrar el log te muestra que no se ha resuelto, porque no la estás esperando.
De esa forma internamente hace esto, y tu fetch
es ejecutado exitosamente:
if (hayValorDisponible) {
(() => {
return fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)
})(valorDisponible);
}
Cualquier duda o pregunta, comenta
then
en lugar de devolver un callback, que es lo que esperathen
. Para solucionarlo bastaría con corregir tu línea donde haces el segundofetch
y quedaría así:.then(() => fetch(`http://localhost:5000/ciudad/${this.state.tour[0].idciudad}`)