javascript - 网格容器内的卡片：列表中的每个孩子都应该有一个唯一的“key”道具

Question

我做错了什么？它还说：“检查”的渲染方法Card，这是在这里：

<div className="grid-container">
   {pokemonData.map((pokemon, i) => {
      console.log(pokemon.id) // unique numbers are here
      return <Card key={pokemon.id} pokemon={pokemon} />
     })}
 </div>

卡片组件本身：

function Card({ pokemon }) {
    return (
        <div className="card">
            <div className="card__image">
                <img src={pokemon.sprites.front_default} alt="Pokemon" />
            </div>
            <div className="card__name">
                {pokemon.name}
            </div>
            <div className="card__types">
                {
                    pokemon.types.map(type => {
                        return (
                            <div className="card__type" style={{backgroundColor: typeColors[type.type.name]}}>
                                {type.type.name}
                            </div>
                        )
                    })
                }
            </div>
            <div className="card__info">
                <div className="card__data card__data--weight">
                    <p className="title">Weight:</p>
                    <p>{pokemon.weight}</p>
                </div>
                <div className="card__data card__data--height">
                    <p className="title">Height:</p>
                    <p>{pokemon.height}</p>
                </div>
                <div className="card__data card__data--ability">
                    <p className="title">Abilities:</p>
                    {/* {console.log(pokemon.abilities)} Temporary for dev puprose */}
                    {pokemon.abilities.map(ability => <p>{ability.ability.name}</p>
                    )}
                </div>
            </div>
        </div>
    );
}

export default Card;

标签： javascriptreactjs

Answer 1

You can use the index of the array may be your data is having some kind of duplicate. It is recommended that you pass a key prop whenever you are returning a list.

<div className="grid-container">
   {pokemonData.map((pokemon, i) => {
      console.log(pokemon.id) // unique numbers are here
      return <Card key={i} pokemon={pokemon} />
     })}
 </div>

Equally, check this segment of card components.

{
  pokemon.types.map((type,i) => {
  return (
       <div key={i} className="card__type" style={{backgroundColor: 
               typeColors[type.type.name]}}>
               {type.type.name}
        /div>
         )
     })
 }

And

<div className="card__data card__data--ability">
      <p className="title">Abilities:</p>
      {/* {console.log(pokemon.abilities)} }
     {pokemon.abilities.map((ability, i) => <p key={i}>{ability.ability.name} 
      </p>
      )}
</div>