Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Consultando la API de detalles del Pokemon

13/17
Recursos

Aportes 2

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

En TypeScript debemos tipar estas props usando el genérico NativeStackScreenProps y el tipado de los screens::

import { FC, useEffect, useState } from 'react';
...
import type { PokedexStackParamList } from '../navigation/PokedexNavigation';

type PokemonProps = NativeStackScreenProps<PokedexStackParamList, 'Pokemon'>;

const Pokemon: FC<PokemonProps> = ({ navigation, route: { params } }) => {
	console.log(params.id); // sin errores
  ...

  return (...);
};

export default Pokemon;

Donde PokedexStackParamList es:

export type PokedexStackParamList = {
  Pokedex: undefined;
  Pokemon: {
    id: string;
  };
};

aporte por si a alguien no le funcion el codigo y lo quiere comparar

api pokemon.js
export async function getPokemonDetailsApi(id) {
    try{
        const url = `${API_HOST}/pokemon/${id}`;
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

pantalla de pokemon.js

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { getPokemonDetailsApi } from '../api/pokemon';

export default function Pokemon(props) {
  const { 
    navigation , 
    route: { 
      params 
    } 
  } = props;
  const [pokemon, setPokemon] = useState(null)

  useEffect(() => {
    (async () => {
      try {
        const response = await getPokemonDetailsApi(params.id)
        setPokemon(response)
      } catch (error) {
        navigation.goBack();
      }
    })()
  }, [params])

  if(!pokemon) return null;

  return (
    <View>
      <Text>Estamos en un pokemon</Text>
      <Text>{pokemon.name}</Text>
    </View>
  ); 
}

boton de gotopokemon

 const goToPokemon = () => {
        console.log(pokemon.id)
        navigation.navigate("Pokemon", { id: pokemon.id })
    }