React JS渲染Pokemon API中宝可梦第二种类型的问题求助

针对你遇到的部分宝可梦没有第二种类型导致报错的问题，提供三种实用的解决方式：

1. 条件渲染（判断存在再渲染） #

利用&&短路逻辑，只有当apiTypes[1]存在时，才渲染第二个类型图片：

import React from 'react';

const Card = ({pokemon}) => {
    return (
       <li className='card'>
        <img src={pokemon.image} alt={pokemon.name} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
          <img src={pokemon.apiTypes[0].image} alt={pokemon.apiTypes[0].name}/>
          {/* 仅当存在第二个类型时渲染 */}
          {pokemon.apiTypes[1] && <img src={pokemon.apiTypes[1].image} alt={pokemon.apiTypes[1].name}/>}
        </div>
       </li> 
    );
};

export default Card;

2. 可选链操作符（安全访问属性） #

使用ES6+的可选链?.，如果apiTypes[1]不存在，apiTypes[1]?.image会返回undefined，此时<img>标签不会加载错误资源：

import React from 'react';

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

export default Card;

3. 循环渲染所有类型（最通用） #

如果后续API可能返回更多类型，直接循环apiTypes数组，自动渲染所有存在的类型，无需手动判断数量：

import React from 'react';

const Card = ({pokemon}) => {
    return (
       <li className='card'>
        <img src={pokemon.image} alt={pokemon.name} />
        <h3>#{pokemon.id} {pokemon.name}</h3>
        
        <div className='infos'>
          {/* 循环渲染所有类型图片 */}
          {pokemon.apiTypes.map((type, idx) => (
            <img key={idx} src={type.image} alt={type.name}/>
          ))}
        </div>
       </li> 
    );
};

export default Card;

另外建议给所有<img>添加alt属性，提升页面可访问性，同时避免控制台警告。

内容的提问来源于stack exchange，提问作者jouce