0

Estoy utilizando la PokeApi y solo me falta ir a la siguiente y anterior pagina... Por ahora pense en hacer una función utilizando el set pero no quiere acceder a "poke". A continuación dejo el codigo . (Quiero aclarar que dentro de la api esta el array next el cual tiene la siguiente pagina.)

      import axios from "axios";
import React, {useState, useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import {Card, ListItem, Button, Icon} from 'react-native-elements'
import {
    View,
    Text,
    FlatList,
    Image,
    TouchableOpacity,
    StyleSheet
} from "react-native";

function Pokedex() {

    const styles = StyleSheet.create({
        textoPoke: {
            textTransform: 'capitalize',
            color: 'red',
            fontSize: 30
        },
        cuadrado: {
            backgroundColor: "pink",
            marginBottom: 10,
            borderWidth: 2,
            borderBottomLeftRadius: 20,
            borderBottomRightRadius: 20,
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20
        },
        icono: {
            width: 80,
            height: 80,
            position: "absolute",
            marginTop: "-4%",
            marginLeft: "80%"
        },
        boton: {
            padding: 50,
        }
    });

    const [poke, setPoke] = useState([]);
    const [loadPoke, setLoadPoke] = useState(
        "https://pokeapi.co/api/v2/pokemon?limit=10"
    );
    const getpoke = async () => {
        const res = await fetch(loadPoke);
        const data = await res.json();
        setLoadPoke(data.next);

        function crearObjetoPokemon(result) {
            result.forEach(async (pokemon) => {
                const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
                const data = await res.json();
                setPoke((currentList) => [
                    ...currentList,
                data
                ]);
            });
        }
        crearObjetoPokemon(data.results);
    };
    useEffect(() => {
        getpoke();
    }, []);

    const navigation = useNavigation();

    function siguientePagina(){
        useEffect(() => {
            setpoke(poke.next);
        }, []);
    }
   
    return (
        <View
            style={{
                justifyContent: "center",
                alignItems: "center"
            }}>
            <FlatList
                data={poke}
                renderItem={({item: pokeItem}) => (
                    <Card>
                        <Card.Title>{pokeItem.name}</Card.Title>
                        <Card.Divider/>
                        <Card.Image
                            source={{
                                uri: `https://projectpokemon.org/images/normal-sprite/${pokeItem.name}.gif`
                            }}></Card.Image>
                        <Text>Peso: {pokeItem.height}</Text>
                        <Text>Altura: {pokeItem.weight}</Text>
                        <Text
                            style={{
                                textTransform: 'capitalize'
                            }}>Habilidades: {
                                pokeItem
                                    .abilities[0]
                                    .ability
                                    .name
                            }</Text>
                    </Card>
                )}/>
        </View>
    );
};

export default Pokedex;

¿Alguna sugerencia para function siguientepagina() ? Actualizo la pregunta agregando mas información. No se si hice mal la función, mal el onpress, sinceramente estoy bastante confundido. Tampoco se si el usestate se puede usar dentro de una función o tal vez existe una manera mas simple y correcta.

2
  • ¿Puedes poner todo el código que tienes hecho? Así podremos ver qué falla, y cómo solucionarlo. Commented el 19 nov. 2021 a las 8:56
  • actualizado!!!! Commented el 19 nov. 2021 a las 16:36

1 respuesta 1

0

primero que nada, no puedes utilizar un useEffect dentro de la función siguientePagina, segundo viendo la api se me ocurre hacer lo siguiente

tener un estado con offset: 0

const [ offset, setOffset ] = useState(0);

y para consultar la api lo haria con el endpoint

const consultarApi = async ()=>{
const url = `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=20`;
const res = await fetch(url);
const data = await res.json();
}

useEffect(()=>{
  consultarApi();
},[offset])

const siguientePagina = ()=>{
  setOffset(offset + 20)
}

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.