Question

我正在使用带有react.js的Pokemon API来创建一个简单的Web应用程序。

我尝试从pokemon API获取所有数据并通过执行

存储在我的数组变量中

componentWillMount() {
// Called first time the comp is loaded right before the comp is added to the page
    console.log('Component WILL MOUNT!')
    var url = "https://pokeapi.co/api/v2/pokemon/"; 
    axios.get(url)

    .then((response) => {
        // setState re-renders component
        this.setState({
            pokemon: response.data
        })

        console.log(this.state.pokemon)

    })

        .catch((error) => {
            console.log(error);
    })
}

这给了我811个小宠物的数据，例如，

{count: 811, previous: null, results: Array(20), next: "https://pokeapi.co/api/v2/pokemon/?offset=20"}
count
:
811
next
:
"https://pokeapi.co/api/v2/pokemon/?offset=20"
previous
:
null
results
:
Array(20)
0
:
name
:
"bulbasaur"
url
:
"https://pokeapi.co/api/v2/pokemon/1/"
__proto__
:
Object

但它只为我们提供了页面的口袋妖怪和网址的名称，它为您提供了有关口袋妖怪的确切（更详细）信息。

所以，网址实际上必须是

url = "https://pokeapi.co/api/v2/pokemon/" + pokemonID

获取详细信息。

但我的目标是将所有这些信息放在一个数组中，并创建一个显示口袋妖怪及其能力的搜索功能。我的搜索功能已经有效，但现在我只能显示它的名字。

如何获取包含每个小精灵的详细信息的所有信息，而不是其详细的json页面的名称和网址？

使用Axios，我如何从Pokemon API获取所有信息？

0 个答案: