0

estoy comenzando con react y se me ocurrio hacer una pokedex usando pokeApi, encontre un video de alguien haciendolo y lo adapte a mi idea, pero tengo un problema con el renderizado de un componente... tengo un navbar al costado, cuando yo selecciono un pokemon despliega un componente con toda la info del pokemon

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

el problema viene cuando yo selecciono otro pokemon, solo cambia la ruta pero sigue el mismo componente que clickee al principio, tengo que actualizar la pagina para poder ver el que seleccioné

introducir la descripción de la imagen aquí

este es mi codigo de la app.js y el de la tarjeta dentro del navbar

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Lo que yo entiendo es que cuando la ruta cambia el state del componente que se genera a la derecha tambien cambia de acuerdo al index del pokemon, este es el codigo del Pokemon.js por si es necesario introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

He pensado e implementado algunas soluciones y he visto algunos videos pero no pude solucionar el tema todavia, saludos!

1 respuesta 1

0

Lo que está ocurriendo (sino me equivoco) es que estás actualizando el estado de PokemonTarjeta unicamente en el ciclo inicial (cuando se monta el componente) componentDidMount que está bien para el primer renderizado.

El problema es que el componente se actualiza cuando cambias de ruta pero el estado no.

Puedes hacer lo siguiente:

componentDidUpdate(prevProps) {
  if (this.props.pokemonIndex !== prevProps.pokemonIndex) {
    this.setState({ ... })
  }
}

De esta manera cuando cambie la ruta puedes actualizar el estado.

2
  • si, creo que es por ahi la solucion, el problema es que me tira TypeError porque no puede leer la propiedad pokemonIndex de prevProps Commented el 11 abr. 2020 a las 16:29
  • Eso parece ser otro problema diferente, de todas formas, cualquier duda pregunta, estamos para ayudar, saludos. Commented el 12 abr. 2020 a las 8:52

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.