React，在map方法中有条件渲染

Question

我有以下代码，我想应用条件呈现，因为索引0不存在。我不想呈现这个特定索引的信息。我该怎么做呢?

return (
<section>
{pokemonCards.map((pokemon, index) =>             
<div key={index}>
<img 
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`} 
alt={pokemon.name}/>
<p>{pokemon.name}</p>
</div>
)}
<button 
className="get-more-button" 
onClick={getMorePokemons}>Get more pokemons
</button>
</section>
)

Answer 1

应该可以:

return (
<section>
{pokemonCards.map((pokemon, index) =>             
{index === 0 ? null : <div key={index}>
<img 
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`} 
alt={pokemon.name}/>
<p>{pokemon.name}</p>
</div>
)}
<button 
className="get-more-button" 
onClick={getMorePokemons}>Get more pokemons
</button>}
</section>
)

Answer 2

如果你不想为不存在的pokemon渲染一个空的div，你可以这样做:

return (
<section>
{pokemonCards.map(
(pokemon, index) =>
index !== 0 && (
<div key={index}>
<img
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`}
alt={pokemon.name}
/>
<p>{pokemon.name}</p>
</div>
)
)}
<button className="get-more-button" onClick={getMorePokemons}>
Get more pokemons
</button>
</section>
);