API 不获取口袋妖怪名称

Question

我想显示所有水型口袋妖怪的列表，但返回了一个名称为空的数组。在本例中，此数组有 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>
);
}

Answer 1

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

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

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