javascript 如何使用React中的UseEffect从pokeapi中获取数据,并使用之前获取的JSON中的url?

ycl3bljg  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(102)

所以基本上,我已经知道如何从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中的信息。

cvxl0en2

cvxl0en21#

首先,我想我们需要重命名这个组件,因为它的名字并不能反映它所呈现的内容。它更像PokeList。然后你可以创建一个PokeCard,它基本上接受所需的任何数据。在每个PokeCard中,你可以像这里一样调用你的API并呈现它。所以基本上,你需要在你的Map上渲染PokeCard,然后每个PokeCard将负责根据一些 prop 获取自己的数据。

相关问题