Api 没有得到口袋妖怪的名字答案

【问题标题】：Api not get pokemon namesApi 没有得到口袋妖怪的名字
【发布时间】：2020-05-13 19:20:04
【问题描述】：

我想显示所有水型口袋妖怪的列表，但返回了一个名称为空的数组。在这种情况下，这个数组有 151 个位置，但名称字段中出现了 151 个空格。

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [pokemons, setPokemons] = useState([]);
  useEffect(() => {
    async function fetchPokemons() {
      const response = await axios.get("https://pokeapi.co/api/v2/type/10");
      setPokemons(response.data.pokemon);
    }
    fetchPokemons();
  }, []);
  return (
    <div>
      <h1>Pokemons tipo água</h1>

      {pokemons.map((pokemon, index) => (
        <div id="pokemon" key={index}>
          <li key={pokemon.name}>
            <p>
              Name: <a href={pokemon.url}>{pokemon.name}</a>
            </p>
          </li>
        </div>
      ))}
    </div>
  );
}

【问题讨论】：

标签： reactjs axios react-hooks

【解决方案1】：

我认为只是因为 api 数组响应中的每个对象都有一个名为 pokemon 的键，所以你只需要：

<a href={pokemon.pokemon.url}>{pokemon.pokemon.name}</a>

或者只是解构它，你的电话。

【讨论】：