Javascript Pokedex项目api react js

我正在努力学习，回应我们，并尝试在我的pokedex应用程序上加载API。我正在尝试加载（pokemon_条目）列表中的每个pokemon，但我不知道怎么做

我已经创建了不同口袋妖怪的卡片，并尝试将列表加载到我的应用程序中

口袋妖怪

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

从“React”导入React；
从“../components/Loader”导入加载程序；
类ListPokemon扩展了React.Component{
状态={
孤岛加载：false，
数据：[]
};
异步组件didmount（）{
this.setState（{isLoading:true}）
const{name，url}=this.props；
试一试{
const response=等待获取(`https://pokeapi.co/api/v2/pokedex/1/`);
const json=await response.json（）；
this.setState（{data:json，isLoading:false}）
console.log（{json}）
}捕捉（错误）{
console.log（err.msg）；
this.setState（{isLoading:false}）
失误
}
}
render（）{
const{isLoading，data}=this.state；
返回(
洛勒姆
{
isLoading？：{data.entry_number}
}
);
}
}
导出默认列表口袋妖怪

数据精灵：

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;

从“React”导入React；
从“react bootstrap”导入{Card，Container，Row，Col}；
const DataPokemon=props=>{const{name}=props；
返回(
{name}
{/*去某处*/}
)
}
导出默认数据口袋妖怪；

---

谢谢大家!

你可以改变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'],
                } )
              })
            }

const pokerray=[]；
for（设i=1；i{
推（{
id:我，
名称：res.data.name，
照片：res.data['sprites']['front_default']，
hp:res.data['stats'][5]['base_stat']，
攻击：res.data['stats'][4]['base_stat']，
防御：res.data['stats'][3]['base_stat']，
} )
})
}