#Gente, tengo una promesa y no se como
fickle ginkgo
Ya que props.data.results[0].name me sale undefined. De hecho, desde props.data me sale undefined
rancid cliff
Creo que tienes que esperar la promesa con await
fickle ginkgo
Segun yo si ando esperando. Esta es la funcion:
noble crater
Piensa en las promesas como en la forma en que JavaScript representa un valor que no está disponible "exactamente ahora", pero que estará disponible en algún momento. Una vez que comprendas esa abstracción, deberás entender que, como tal, no hay manera de que accedas "en este momento" al valor de la promesa resuelta; es decir, no puedes hacer lo que intentaste: props.data.results... cuando props es una promesa.
rancid cliff
Segun yo si ando esperando. Esta es la funcion:
Pero getProps es una funcion asincrona, también devuelve una promesa
fickle ginkgo
Pero getProps es una funcion asincrona, también devuelve una promesa
Tiene sentido. Entonces como salgo del loop de las funciones asincronas?XD
rancid cliff
Tiene sentido. Entonces como salgo del loop de las funciones asincronas?XD
await getProps, prueba eso
noble crater
Segun yo si ando esperando. Esta es la funcion:
Como dice @rancid cliff , tu función getProps también devuelve una promesa.
En React, la asincronía se maneja dentro del hook useEffect, así:
function Pokelist(props {
const [resolvedProps, setResolvedProps] = useState();
console.log({resolvedProps});
useEffect(() => {
const getProps = async () => {
let res = await props;
setResolvedProps(res);
}
getProps();
}, [props]);
}
El código es mejorable. Sólo realicé las mínimas modificaciones a tu código para que fuese más fácil de asimilar qué fue lo que cambió.
noble crater
Lo intente pero me sigue respondiendo una promesa
De dónde viene el valor de props?
fickle ginkgo
De aqui. Tambien tendre que transformar pokeList () en un state no?
noble crater
Ya veo
En getPokeApiData haz el siguiente cambio:
const pokeListPackage = await (axios.get(...).then(res => res.json())
Eso como un primer paso. El segundo paso sería que dentro de App resolvieses la promesa dentro del useEffect como te indiqué. Las promesas se tienen que resolver en el sitio en donde fueron creadas, ya que pasar promesas como props es malo.
fickle ginkgo
Me marco error, dice que .json no es una funcion
fickle ginkgo
Eso como un primer paso. El segundo paso sería que dentro de `App` resolvieses l...
Entendido, trabajo en ello
noble crater
Me marco error, dice que .json no es una funcion
Entonces no está devolviendo JSON esa API.
fickle ginkgo
Me marco error, dice que .json no es una funcion
noble crater
Es posible que axios ya esté deserializando la respuesta por ti. Tengo muchos anios sin utilizarla ya que prefiero usar el fetch nativo.
fickle ginkgo
Si, tengo entendido que axios ya devuelve el .json
noble crater
Si, tengo entendido que axios ya devuelve el .json
Entonces quita el .then que te dije. No es necesario entonces.
fickle ginkgo
Va
noble crater
Y cambia el código dentro de App para que la promesa se resuelva antes de que pases las props.
fickle ginkgo
Eres un grande amigo! Muchas gracias
Solo tenia que resolver la promesa en App. Con eso ya me dio acceso, sin tener que resolver props en Pokelist
Ahora mi duda es. Porque con un solo render se console.logea 4 veces?XD
noble crater
Ahora mi duda es. Porque con un solo render se console.logea 4 veces?XD
Supongo que estás utilizando React 18. En React 18 se introdujo un cambio que hace que hooks como useEffect se ejecuten dos veces, esto con la finalidad de evitar inconsistencias en el uso de ellos ya que en el futuro piensan implementar funcionalidades que dependerán de ello.
Ahora, eso sólo explica la mitad de tus renders (2) 😆 . Puedes mostrar cómo quedó el código dentro de App? Ya con ello podría decirte de dónde vienen los otros 2 renders.
fickle ginkgo
Ahorita te envio la captura. La otra cosa que noto es que solo funciona cuando hago un cambio y le doy save. Pero si con ese save le doy refresh en el navegador, ya marca el siguiente error:
Asi quedo App
Esto anterior sucede porque en los 2 primeros renders, la promesa no esta resuelta
Tengo que ver porque suceden los 2 primeros console.logs
los return console.logean? 🤔
noble crater
El error lo puedes resolver así (línea 32 de App):
{resolvedProps ? <Pokelist props={resolvedProps} /> : null}
noble crater
los return console.logean? 🤔
Tengo que ver porque suceden los 2 primeros console.logs
los return console.logean?
En React se renderizan los componentes hijo antes que el padre.
fickle ginkgo
El error lo puedes resolver así (línea 32 de `App`):
`{resolvedProps ? <Pokelis...
Nice! Si se arreglo
fickle ginkgo
> Tengo que ver porque suceden los 2 primeros console.logs
> los return console....
Eso tiene sentido
Abusando de tu confianza. Como le hago para poner en mi funcion map, un numero dinamico que refleje el numero de iteracion?
noble crater
Abusando de tu confianza. Como le hago para poner en mi funcion map, un numero d...
Con estado. Manejarías el estado en App ya que es donde estás realizando el fetching de datos.
fickle ginkgo
Es decir, en un for loop, por ejemplo: for (i=0; i < 1; i++) { arr[i] }
fickle ginkgo
Con estado. Manejarías el estado en `App` ya que es donde estás realizando el fe...
Benditos estados
noble crater
Perdón, respondí sin leer bien la pregunta, pensando que preguntabas otra cosa.
El segundo parámetro que recibe .map es el índice del valor de la iteración.
Es decir, el valor de i como si estuvieras haciendo un loop manual como en el for loop que mencionas.
Para que lo entiendes, es esto:
console.log({i});