reactjs 在React js，javascript API上从数组获取元素时出现问题

a11xaf1n 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(180)

我正在学习javascript和React JS，但是当我想获取一些关于口袋妖怪API的信息时遇到了一个问题^^我可以获取一些信息，但是我想获取第二种类型的口袋妖怪，正如你所看到的，它对第一种类型有效，但对第二种类型无效。
我想问题是不是所有的口袋妖怪都有两种类型（"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]，但我不知道如何...非常感谢：）

reactjs

来源：https://stackoverflow.com/questions/75272272/problem-to-get-an-element-from-an-array-on-react-js-javascript-api

2条答案

按热度按时间

smtd7mpg1#

解决这个问题的一种方法是使用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;

赞(0）回复(0）举报 2023-01-30

juud5qan2#

你提到过，不是所有的口袋妖怪都有两种类型，所以尝试使用 * 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>

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 在React js，javascript API上从数组获取元素时出现问题

2条答案

相关问题

热门标签

最新问答