Question

我正在尝试学习，做出反应，并尝试在我的pokedex应用程序上加载API。 https://pokeapi.co/api/v2/pokedex/1/我正在尝试在（pokemon_entries）列表中加载每个宠物小精灵，但我不知道该怎么做

我已经创建了其他口袋妖怪的卡，并且试图将列表加载到我的应用程序中

ListPokemon

import React from 'react';
import Loader from '../components/Loader';



class ListPokemon extends React.Component {
    state = {
        isLoading: false,
        data: [ ]

      };

    async componentDidMount() {
        this.setState({isLoading:true})
        const {name, url} = this.props;

        try {
            const response = await fetch(`https://pokeapi.co/api/v2/pokedex/1/`);
            const json = await response.json();
            this.setState({data: json,isLoading:false})
            console.log({json})
          } catch (err){
            console.log(err.msg);
            this.setState({isLoading:false})
            throw err
        }
    }



    render() {
        const {isLoading,data} = this.state;
        return (
          <>
            <h1>Lorem</h1>
          {
            isLoading ?<Loader/> : <h1>{data.entry_number}</h1>
          }


          </>
        );
      }
    }


export default ListPokemon

DataPokemon：

import React from 'react';
import { Card,Container,Row,Col } from 'react-bootstrap';

const DataPokemon = props =>  {const { name } = props;


return(
    <Container>
  <Row>
  <Col xs={6}>
    <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>{name}</Card.Title>
    <Card.Text>

    </Card.Text>
    {/* <Button variant="primary">Go somewhere</Button> */}
  </Card.Body>
</Card>
</Col>
</Row>
</Container>
)
}





export default DataPokemon;

谢谢！

Answer 1

您可以更改x并获得更多或更少的宠物小精灵。

     const pokeArray = [];   

     for(let i=1; i<x; i++) {
              axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => {
                pokeArray.push( {
                  id: i,
                  name: res.data.name,
                  photo: res.data['sprites']['front_default'],
                  hp: res.data['stats'][5]['base_stat'],
                  attack: res.data['stats'][4]['base_stat'],
                  defense : res.data['stats'][3]['base_stat'],
                } )
              })
            }

Pokedex项目API React JS

1 个答案: