如何在地图功能中创造独特的价值？它需要键值

Question

我现在正在努力学习 JS。并开始做一些学习和示例项目。

我现在遇到了一个问题。我正在研究反应路线系统。所以我必须发送一个唯一值来为我的宠物小精灵创建一个唯一路径（我使用 pokeAPI ）但是这个 API 不会为宠物小精灵提供唯一值，只给出名称和 URL。 A 在我的口袋妖怪列表页面上有 20 个口袋妖怪。

现在我需要唯一的 ID 才能发送 PokemonShowComponent。我怎样才能找到一个唯一的 ID 用于此目的？

    return (
    <div>
      <h1> Pokemon pages </h1>
      <div>
        {pokemons.map((pokemon, id) => (
          <h3 key={id}>
            <Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
          </h3>
        ))}
      </div>
    </div>
  );

我想要一个 id 参数计数，如 forEach 方法和 return 每一步 1 到 20。就像 i++。

有可能吗？

注意：Pokemon 变量来自这行代码。

const fetchPokemons = async () => {
    const data = await fetch("https://pokeapi.co/api/v2/pokemon/");

    const pokemons = await data.json();
    console.log(pokemons.results);
    setPokemons(pokemons.results);
  };

Answer 1

您的地图中已经有一个唯一的id，这是第二个参数：

{pokemons.map((pokemon, id) => (

id 将 return 一个从 0 开始并自动递增的值

Answer 2

设置您所在州的初始计数。

您可以依靠它来限制要显示的卡片数量或任何东西。随心所欲地使用你的状态，没有理由让自己变得更难。

尽管如此，您可以通过多种方式来解决这个问题。甚至 css 基于。

Answer 3

{pokemons.map((pokemon, id) => (
    <h3 key={id}>
        <Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
       </h3>
   ))}

你的第二个参数 id 应该有效

但我认为您需要使用 {`/pokemon/${id}`} 而不是引号

如何在地图功能中创造独特的价值？它需要键值

How can create uniqe value in map function? Its need for key value

javascript

reactjs

map-function