Api未获取pokemon名称

Question

我想要显示所有water类型的pokemons的列表，但是返回了一个名称为空的数组。在本例中，此数组有151个位置，但name字段中出现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>
  );
}

Answer 1

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

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

或者干脆拆解它，你说了算。