时间戳

首页 > 解决方案 > React - 列表中的每个孩子都应该有一个唯一的“关键”道具

reactjs - React - 列表中的每个孩子都应该有一个唯一的“关键”道具

问题描述

作为我的第一个 react 项目，我决定尝试制作一个 Pokedex。我有一个口袋妖怪数组，我将其传递给 List 组件并使用该.map()函数进行渲染。我知道该.map()函数返回的最根元素需要一个唯一的键，并且我知道如果键可以对项目真正唯一是理想的，这样如果对列表进行排序，项目具有相同的键。因此，我认为使用口袋妖怪的“id”是理想的。我相信我已经做到了，但我无法摆脱控制台中的警告。我真的很感激这个。

export default class List extends React.Component {
  render() {
    const { list, nav } = this.props;
    return (
      <div className="list">
        {list.map((pokemon) => (
          <PokemonItem key={pokemon.id} navigation={nav} pokemon={pokemon} />
        ))}
      </div>
    );
  }
}

PokemonItem 渲染方法

render() {
    const { pokemon, navigation } = this.props;
    return (
      <div onClick={() => {
          navigation.navigate("Details", { pokemon });
        }}
        className={"list-item bg_" + pokemon.types[0]}>
        <div className="header">
          <div className="name">{pokemon.name}</div>
          <div className="id">#{this.getId(pokemon.id)}</div>
        </div>
        <div className="body">
          <div className="types">
            {pokemon.types.map((type) => {
              return <div className="type">{type}</div>;
            })}
          </div>
          <div className="sprite">
            <img src={pokemon.imgURL} alt={pokemon.name} title={pokemon.name}></img>
          </div>
        </div>
        <div className="background-image">
          <img src={PkBall} alt="" />
        </div>
      </div>
    );
  }

控制台中显示警告消息

标签： reactjs

解决方案

编辑 OP 的问题后，警告出现在此处：

<div className="types">
            {pokemon.types.map((type) => {
              return <div className="type">{type}</div>;
            })}
</div>

key-property 没有设置div，应该像第一种方法一样完成。如果type是唯一的，您可以将其用作key.

推荐阅读