所以基本上,我已经知道如何从pokeAPI中获取一个JSON,看起来像这样,对于前9个口袋妖怪,并且能够在网格中呈现口袋妖怪的名称。
[
{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
},
{
"name": "ivysaur",
"url": "https://pokeapi.co/api/v2/pokemon/2/"
},
{
"name": "venusaur",
"url": "https://pokeapi.co/api/v2/pokemon/3/"
},
{
"name": "charmander",
"url": "https://pokeapi.co/api/v2/pokemon/4/"
},
{
"name": "charmeleon",
"url": "https://pokeapi.co/api/v2/pokemon/5/"
},
{
"name": "charizard",
"url": "https://pokeapi.co/api/v2/pokemon/6/"
},
{
"name": "squirtle",
"url": "https://pokeapi.co/api/v2/pokemon/7/"
},
{
"name": "wartortle",
"url": "https://pokeapi.co/api/v2/pokemon/8/"
},
{
"name": "blastoise",
"url": "https://pokeapi.co/api/v2/pokemon/9/"
}
]
下面是我用来调用API的自定义钩子,以及使用钩子的组件,
x一个一个一个一个x一个一个二个x
我尝试做的是从第一个useFetch中获取url,并使用它们再次调用API,使用第一个检索到的json中的"url",存储在PokeCard组件的pokemons中,但我不知道我应该做什么,我不能将钩子调用放在循环中,以动态检索要放入poke-card中的信息。
1条答案
按热度按时间cvxl0en21#
首先,我想我们需要重命名这个组件,因为它的名字并不能反映它所呈现的内容。它更像
PokeList
。然后你可以创建一个PokeCard
,它基本上接受所需的任何数据。在每个PokeCard中,你可以像这里一样调用你的API并呈现它。所以基本上,你需要在你的Map上渲染PokeCard
,然后每个PokeCard将负责根据一些 prop 获取自己的数据。