在 React js，javascript API 上从数组中获取元素的问题答案

【问题标题】：problem to get an element from an array on React js , javascript API在 React js，javascript API 上从数组中获取元素的问题
【发布时间】：2023-02-02 10:54:00
【问题描述】：

我正在学习 javascript 和 React JS，但是当我想获取有关 Pokemon API 的一些信息时遇到问题 ^^ 我可以获取一些信息，但我想获取第二种类型的 Pokemon，如您所见，它正在为第一种而不是第二种。

我认为问题是不是所有的口袋妖怪都有两种类型（“apiTypes”），但我不知道如何渲染第二种。感谢您的帮助，对不起我的英语 ;)

JSON：https://pokebuildapi.fr/api/v1/pokemon

/ https://pokebuildapi.fr/api/v1/pokemon

[
  {
    "id": 1,
    "pokedexId": 1,
    "name": "Bulbizarre",
    "image": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png",
    "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
    "slug": "Bulbizarre",
    "stats": {
      "HP": 45,
      "attack": 49,
      "defense": 49,
      "special_attack": 65,
      "special_defense": 65,
      "speed": 45
    },
    "apiTypes": [
      {
        "name": "Poison",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/0/05/Poison.png"
      },
      {
        "name": "Plante",
        "image": "https://static.wikia.nocookie.net/pokemongo/images/c/c5/Grass.png"
      }
    ],

import React from 'react';

const Card = ({pokemon}) => {
  

    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
        <img src={pokemon.apiTypes[0].image}/>
        <img src={pokemon.apiTypes[1].image}/>
        
        
        </div>
       </li> 
    );
};

export default Card;

我知道我必须问 [1] 上是否有图像，但我不知道如何... 多谢：）

【问题讨论】：

你可以在 pokemon.apiTypes 中制作地图

标签： javascript reactjs arrays api react-hooks

【解决方案1】：

解决这个问题的一种方法是使用 map 方法遍历所有 apiType，如下所示：

import React from 'react';

const Card = ({pokemon}) => {
  

    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        <div className='infos'>
        {
          pokemon.apiTypes.map( apiType => <img src={apiType.image}/>
        }
        </div>
       </li> 
    );
};

export default Card;

【讨论】：

【解决方案2】：

你提到过，并不是所有的宠物小精灵都有两种类型，所以尝试使用访问第二种类型pokemon.apiTypes[1]对于那些只有一种类型的神奇宝贝会导致错误。

解决此问题的一种方法是仅渲染存在的第二种图像。您可以通过检查 apiTypes 数组的长度来执行此操作，并且仅在长度大于 1 时才渲染第二种类型的图像。

import React from 'react';

const Card = ({pokemon}) => {
    return (
       <li className='card'>
        <img src={pokemon.image} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
        <img src={pokemon.apiTypes[0].image}/>
        
        {pokemon.apiTypes.length > 1 && <img src={pokemon.apiTypes[1].image}/>}
        
        </div>
       </li> 
    );
};

export default Card;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：