如何从API "PokeAPI“获取数据

Question

我有反应成分：

import React from "react";
import { Pokemons } from "../Pokemons";

class Main extends React.Component {
  state = {
    pokemons: [],
  };

  componentDidMount() {
    fetch("https://pokeapi.co/api/v2/pokemon?limit=20")
      .then((responce) => responce.json())
      .then((data) => this.setState({ pokemons: Object.values(data) }));
  }

  render() {
    return (
      <main className="container content">
        <Pokemons pokemon={this.state.pokemons} />
      </main>
    );
  }
}

export { Main };

我正在使用的API是 https://pokeapi.co/

我的任务是显示关于前20个精灵的数据(这就是我在fetch()中要做的)。但我不完全明白我需要的东西：

控制台information.png

，即具有四个元素的JSON响应，我需要的是最后一个( 3：):

控制台信息2.png

**此外，20个对象(妖怪)中的每一个都有一个名称和一个链接：**

控制台信息3.png

从这个我只需要名称，其余的必要信息(类型，高度，精灵)是这些链接上的数据。链接中的示例数据：

来自link.png的数据

实际上，口袋妖怪的名称也包含在这些链接中的数据中.

我以前从未遇到过这样的API结构=(

问题--帮我弄到精灵的名字、类型、身高和体重.

Answer 1

去掉Object.values(data)，用data.results替换它

数据包含第一层数据，包括计数、下一步、结果等。您对结果对象感兴趣，该对象包含名称、类型等.

通过执行data.results，您可以将20个口袋妖怪对象推到您的状态，然后您可以

1. 迭代对象数组，并为每个口袋妖怪或
2. 将整个pokemon数组发送到<Pokemon />组件，并在组件本身内执行此操作。

示例：

1. 返回( {this.state.pokemons.map((pokemon) => ( )} );`
2. 返回( );`

// Pokemons Component accepts pokemon array, and iterate it